Video-hub-app: "Show folders in file view"

[avenminer]

Toggling this no longer shows folders in the file view. It worked around version 1.9.6 but I can't find the commit that changed it.

[whyboris]

The one thing I've done is move the button to another location:
https://github.com/whyboris/Video-Hub-App/blob/master/src/app/common/settings-buttons.ts#L55

Since I've not yet added appropriate icons, there may be other buttons that look the same but don't do what you expect based on the icon 😅

When clicking on Show folders you should see a "breadcrumbs" menu slide out from the top. If the folder with all the videos you imported has no folders, you won't see any folders. The easiest way to tell if you have folders is to look at the sidebar where it says N folder and M videos at the top (where N and M are numbers > 0) 👍

Please let me know if you think you've found a bug 🤝

[whyboris]

The folder refactor happened 30 days ago: https://github.com/whyboris/Video-Hub-App/pull/236 and it was major. It changes things substantially from before -- perhaps this is the issue 👌

[avenminer]

Ok so small update, if the hub is set to a root of a drive, the folders won't show up. E.g. I have a drive called TV Shows at G: and if I set that as my directory, no folders show up. My movies folder is in D:/Movies, and the folders show up completely fine for that.

Edit: I moved all the folders in G: to G:/Test and made a new hub in that folder and it worked as intended.

[whyboris]

Thank you for the update and the description. I'll see if I can replicate and patch the bug before version 2.0.0 😅

[avenminer]

Ok another update on this (not meaning to rush you, just getting you more information so you can maybe debug it easier). So I tried playing around with it some more and I am getting extremely inconsistent behavior.

Scenario 1
In this scenario everything is placed at the root of the drive.

• G:\
  
  
  
  • Movie 1\
  
  
  • Movie 1.mp4
  
  
  • Movie 2\
  
  
  • Movie 2 Subfolder
    
    
    
    
    
    • Movie 2.mp4
    
    
    
  
  
  • Movie 3.mp4
  
  
  • Movie 4.mp4
  
  

In this scenario, the folder layout will not work, if you have nested folders, then it WILL create folders for those but if you click to go inside, it will show up as blank (even though the thumbnail for the folder correctly shows the things inside).

Scenario 2
In this scenario, I created a subfolder in the root and that contains all the other video folders. Based on what the subfolder is called, some names will let it work, some will break it as described below.

• G:\
  
  
  
  • 1\
  
  
  • Movie 1\
    
    
    
    
    
    • Movie 1.mp4
    
    
    
  
  
  • Movie 2\
  
  
  • Movie 2 Subfolder
    
    
    
    
    
    • Movie 2.mp4
    
    
    
  
  
  • Movie 3.mp4
  
  
  • Movie 4.mp4
  
  

No thumbnails will work now. I was just creating a test folder and named it the first thing I could hit which happened to be 1, and it screws everything up. The thumbnails show up as empty and if I view source to see the location of the thumbnails I see this file://G:\1 /vha-55/thumbnails/hash.jpg
So it adds a space and a slash in a different direction. The same will result if folder 1 is named 2, a or b, while other random things like m or Movies will work.

This is on Windows and I have not tested on Mac/Linux.

Edit: Would you mind sharing your launch.json? I can't get breakpoints to work in the chrome process.

[avenminer]

Might be fine for most people though, dont think a lot of people use the root of a drive.

[whyboris]

I'll test it out -- one of the intended use cases is to use an external hard drive root folder, so it's important that works 🙇

[avenminer]

Ok so another update on this. The issue is that when a thumbnail is requested, path.normalize service returns a path for _the folder_ part with a backslash.

https://github.com/whyboris/Video-Hub-App/blob/013de39518a121b4943e993ae1ca36b928855062/src/app/components/views/thumbnail/preview.component.ts#L64

https://github.com/whyboris/Video-Hub-App/blob/013de39518a121b4943e993ae1ca36b928855062/src/app/components/views/file-path.service.ts#L20-L28

The reason why it seems to be working in some places, but not in others, is that Chrome seems to be automatically correcting the URL as best as it can. If we add console.log(fullPath); right before it is returned, you can see the jumbled URL that is provided.

[whyboris]

Thank you for digging in -- I'm somewhat embarrassed with how I handle path stuff -- I don't have a consistent theme, but a hodgepodge of spot-fixes. I probably should comb over everything related to generating/saving path and \ vs / issues ... probably should before release (pushing the release back another week 😓 )

[whyboris]

@avenminer -- if you have a chance, could you glance at master now that #286 has been merged and see if the problem you encountered is fixed? 🙇

[whyboris]

@avenminer -- thank you again for bringing my attention to various bugs 🙇

I replicated the problem you described above even after the fix:

1. Import the root of an external hard drive
2. Try to navigate using the _folder_ navigation
3. See that folders show up empty 😢

Will fix 👌

[avenminer]

@whyboris
So good news, I found the source of the issue. It's during the VHA file generation.

https://github.com/whyboris/Video-Hub-App/blob/524df60bfce3e4da5ecb5f93251d849d9953cbd3/main-support.ts#L251-L276

So for each file we run partialPath = dir.replace(sourceFolderPath, '').replace(/\\/g, '/'); but the issue is that it is stripping the leading / from folders in a root directory. So going back to my earlier example directory structure:

• G:\
  
  
  
  • 1\
  
  
  • Movie-1\
    
    
    
    
    
    • Movie 1.mp4
    
    
    
  
  
  • Subfolder1\
  
  
  • Movie-2-Subfolder\
    
    
    
    
    
    • Movie 2.mp4
    
    
    
  
  
  • Movie 3.mp4
  
  
  • Movie 4.mp4
  
  

If sourceFolderPath is at the root of the directory then it will result in G:/, but if we place it at Subfolder1, then it will be G:/Subfolder. This means that partialPath for Movie-1 if our hub is at the root will be Movie-1 but the partialPath for Movie-2-Subfolder will be /Movie-2-Subfolder.

I won't push the fix for it because it is very hacky and I am not sure you would like it but this has fixed it for me

Replace partialPath = dir.replace(sourceFolderPath, '').replace(/\\/g, '/');
with

             let partialPath;
              if (dir.charAt(dir.length - 1) === '\\') {
                partialPath = dir.replace(sourceFolderPath, '').replace(/\\/g, '/');
              } else {
                partialPath = dir.replace(sourceFolderPath, '\\').replace(/\\/g, '/');
              }
              if (partialPath.charAt(1) === '/') {
                partialPath = partialPath.slice(1);
              }

[whyboris]

🙇 Thank you so much for 🔍 tracking down the issue 🙌 and even providing a working fix

Since I was able to replicate the bug, I'll be able to change the code and confirm that it fixes the problem at hand.

The _path_-related kerfuffle is because I have to support _Windows_ and _Mac_ at the same time, and I didn't do a good job of treating paths in some uniform way. I'll try to resolve it all before the release so I don't have to create patch releases that might break compatibility with user-created files 😅

🙇 thank you again 🙇

[avenminer]

Np! Yeah I figured thats exactly what was going on, and wasn't sure it if it would break things with other OS's.

[avenminer]

Oops, misclick.

[whyboris]

Oh I feel like I'm being a very bad developer ... I just want to take the line that causes problems:

partialPath = dir.replace(sourceFolderPath, '').replace(/\\/g, '/');

And simply do this:

const partialPath = ('/' + dir.replace(sourceFolderPath, '').replace(/\\/g, '/')).replace('//', '/');

Specifically, just prepend / and replace // with / if it occurs 🤷‍♂

I checked across my app - everywhere I expect and use /, and since Windows can deal with / (even though it prefers \) I think everything should work out 😅

Will test it out ... I'm trying to mess with as little code as possible before release; I can refactor and clean it up later for version 3 if needed 😅

[whyboris]

One-line change to fix 😅 #287
Thank you @avenminer for putting the laser pointer at the exact problem 🙇 -- saved me a bunch of time ⌚️

This should fix the problem without causing any others ... please let me know if you suspect I'm forgetting about something 🙇

[whyboris]

@avenminer please if you have the patience, could you confirm that this change fixes the problem for you as well? 🙇