[feat] Playlists

[accforgithubtest]

I saw this post on reddit and immediately thought erin could probably include this feature.

My understanding is that, in erin, the folder structure already serves as a sort of playlist.

What could be potentially added are visual cues about the playlist, along with features to allow some reasonable level of navigation and auto playback.

I am thinking -

1. Option to go in full screen (another button in the bottom bar perhaps ?).
2. A new feature controlled by environment variable to proceed to next video (PLAYLIST_MODE=true/false), which will automatically play the next video after the current one ends. Given there already exists ways to easily go to previous video, as well as seek, this should be a very useful feature.
3. Some way to "navigate/browse" the folders / subfolders / one level up folder as a side bar or something like that. Selecting a folder is basically the same as a "playlist".

I understand the reddit post is also looking for a way to continue the streaming from a specific point as someone else viewing / or time based, but I am not sure if something like that can be implemented here. I am just thinking of some feature that might be useful in erin.

Would you consider if any of these features belong in erin ?
Looking forward to hearing your thoughts / ideas.

[will-moss]

Hi,

Thanks a lot for opening the issue, and most importantly for all the great ideas and suggestions.

To address every point :

• Option to go full screen : Definitely adding it. I will implement a double-tap-to-enlarge / double-tap-to-reduce, like Youtube does, so as not to add another button.

• A feature to automatically play the next video : If I'm not mistaken, that's actually already implemented, via the AUTOPLAY_ENABLED setting, isn't it?

• A UI control to browse through the folders (playlists) : So far, it's true that accessing a folder is possible only via its direct URL. I have now added that feature to my roadmap (= add a navigation control for browsing), and I'll try to find a way to implement it without "bloating" the UI with yet another big button (maybe something gesture-based).

• The continuous streaming feature, as indicated on Reddit : It is, indeed, impossible to implement it natively, as everything happens client-side in the currect architecture. However, one way to have "the same mechanism" would be to have an always-opened browser on Erin, and have people view that browser instance. Something like : https://github.com/m1k1o/neko - There would be a Neko instance having a tab opened on Erin, and users would connect to Neko, and hence, all have the same browser and display.

Thanks a lot once again, and let me know if you see anything else!

Looking forward to releasing those great features very soon.

[accforgithubtest]

Looking forward to seeing the new features.
You are right, I will try out the AUTOPLAY_ENABLED settings now.
Thanks & Cheers !

[will-moss]

Just released the new features! You can pull the latest image.

There is now a new button dedicated to viewing the playlists that were discovered on disk, and you can easily browse through any of them by tapping the button, and picking a playlist. (I thought initially that a gesture-based navigation would be simpler, but I was wrong, or so I believe now. I concluded that adding a fourth button wouldn't be an issue for anyone, and would make using the app easier than introducing a new hand gesture).

Additionally, you now have three double-tap mechanisms : seek backward, enter / exit fullscreen, and seek forward, depending on which third of the screen you double-tapped.

Hoping that it works smoothly on your end, and meets the initial demand!

Edit : Should the controls be hidden in fullscreen mode?

[accforgithubtest]

Thank for such a quick update !

I just pulled the latest image, and agree that the current implementation for browsing the folders is clean and easy to use with the button there. The double tap features are good too.

Just want to see what your thought on this is - I guess sometimes the pause and full screen being center-tap based is a bit hit/miss, but thats a minor thing imo, so the current implementation for this is good.

I noticed few issues -

1. The browser list is displaying both folders and files. With a lot of videos, the files being shown there is not practical, takes a while to scroll to the next folder. So, if possible, can only the folders be listed and not the individual files ? Nested folder makes the problem worse when all the files are listed. So, displaying only the folders and nested folders would make it less cluttered.

2. Upon selecting the video from browser list, it is not playing the correct video, but some other random video - not even from the correct folder but a different folder. I tried this a few times already and see the issue consistently.

3. Is it possible to get the playlist / folder UI to follow the same theme as the browser / system ? I am on a Ubuntu desktop with firefox browser, with ubuntu system set to dark theme and firefox set to follow system theme. The browser list displays in white / light theme.

If these issues are sorted, I think the current implementation is pretty good for covering the playlist feature.

Should the controls be hidden in fullscreen mode?

Is it possible to hide controls in full screen but show them on mouse move ? Would be nice to see controls easily without having to exit full screen, but it will be nice to have them hidden if there is no mouse activity for x seconds.

[will-moss]

Thanks to you for the feedback, all the ideas, and reporting back on the issues!

About :

• The tap-to-pause / tap-to-unpause : Maybe adding a final fifth button in the center would be the solution ? So there would be this play/pause button in the center, and only double taps would be handled on the video itself for fullscreen and seeking forward/backward

• The browser list issues on your end : This is what I observe in my setup : https://ibb.co/TPc9Y8z - It only shows folders, even though I have 500+ files distributed across those. Maybe does the UI show one playlist (folder) per video on your end because every video has its own folder with the mp4 file and the JSON file that represent it? If not, it would be super helpful if you could show me an excerpt of your folder hierarchy, so I can reproduce it and see what makes the code display one playlist per file, rather than one playlist per folder. Otherwise, I will still look linto the one-folder-has-mp4-and-json case to try to prevent those from showing up as playlists. I hadn't thought of it before.

• The wrong video playing upon selection : I think it has to do with the previous point, or maybe with enconding / characters in the folder that wouldn't work well in the URL? Characters like : # / \ ! ? =

• The UI following the system theme : Let's do it. I'll definitely agree that this white color kills my eyes as well.

• The fullscreen mode : Let's do it too -> hiding controls by default in fullscreen, and showing them on mouse move.

Once again, thanks a lot. It's very enjoyable to see what the app is becoming.

[accforgithubtest]

Thanks for the reply !

So there would be this play/pause button in the center, and only double taps would be handled on the video itself for fullscreen and seeking forward/backward

Yes, that sounds perfectly fine, and should make it clear to user.

For the folder structure - Most files have non-english (asian languages) characters in the file names. Does that cause any issues ?
I will try to create a folder structure to recreate the issue and share it.

every video has its own folder with the mp4 file and the JSON file that represent it?

No, that is not the case. Most files are videos from phone sitting in one folder. I have created folders and renamed files based on location of the trip, or events or something or some description, etc. There are no json files created, just videos in folders.

Thanks again for all your work and effort & Cheers !

[will-moss]

Alright, thanks a lot once again.

You were absolutely correct for the Asian characters!

I have just published a new release that includes everything discussed :

• Asian characters are now supported, and playlists should display and link properly. (I have tested Japanese, Thai, and Chinese on my end).
• There is now a fifth button in the middle, to play or pause the current media, and that replaces the previous tap gesture.
• Fullscreen mode will now hide the navigation bar by default, and moving the mouse will reveal it for three seconds, or as long as it's moving.
• The playlist and blacklist managers now have a dark theme style, applied automatically based on the OS preferences.

You can pull the latest image, and I hope that everything works way better now!

[accforgithubtest]

@will-moss - awesome and that was quick !

All the above points are working well as expected.

I have found that I have a few files with emoji and "%" in the files names. Looks like these files names need fixing as they still show up as individual files in the file browser - hopefully the last fix for this feature !

Thanks a ton for all your efforts !

[will-moss]

Alright, thanks a lot for your feedback.

I have just published (what I believe to be) the final fixes.

I have tested using percent symbols, cyrillic and asian characters, and emojis too, and everything looks fine.

Crossing my fingers that it all works fine on your end.

[accforgithubtest]

@will-moss - thanks again for all your effort !

Looks like a older issue might have been re-introduced, I see all files listed in the folder browser, even ones with spaces, underscores, etc, which were working before.

Edit - All files with spaces in them are now showing with a "%20" in the file name. I see many other such characters as well probably for underscores or other characters.

[will-moss]

Erm, really sorry for that!

Is there any chance you could run tree or multiple ls commands so that I could have a glimpse into your folder hierarchy? Here's an excerpt from my end : https://ibb.co/w7t378M

The characters that are weirdly displayed are either Cyrillic, Asian, or Emojis.

If I could reproduce your folder structure, it'd be easier to find what's causing issues on your end.

Thanks a lot once again.

Edit : I have just tried adding random spaces, dashes, and other symbols, and I really can't seem to reproduce any issue. Could it have anything to do with your cache maybe?

[accforgithubtest]

I think it might be something to do with commas in file names ?
or perhaps a combination of commas, underscores and dots in files names ?

I am using this opportunity to clean up my files names as well (I dont think its fair to keep this issue open because some random character in some old file name might be causing the issue).

I found a project called detox which removes "not-preferred" characters in the files names, but it doesn't seem to remove commas and multiple dots in files names.

I still see the issue after running detox on all my photos and videos files, though the number of files in the files browser has drastically decreased now.
Now in file browser, I only see files that have commas(,), underscores(), hashes(#), dots(.). Some files have multiples of these in different combinations, including few files names that end with a unserscore-dot combo ".".

I will try to narrow it down further from end.

[will-moss]

You were absolutely right, once again! Thanks a lot for your time and investigation.

I have just tried stress-testing my system using filenames with every character combination that I could think of, and it seems that commas were the culprit. I have just published a new fix that changes the way playlists are identified and linked, and I think that it should work seamlessly now (or until proven otherwise !!)

The only limitation that I think can't be / shouldn't be circumvented is the presence of hashes (#) in the filename. Since this symbol is used for browser anchors, I think it shouldn't be used in filenames altogether. Otherwise, do you see a use-case for that symbol?

Thanks a ton once again, and hoping that it works better on your end now.

Edit : Forgot to mention that I don't mind working on that issue, so long as it becomes beneficial to every future user!

[accforgithubtest]

Thanks !

The playlist browser is totally fine now, even though I have not yet fully finished my cleanup of files names. I have made sure to remove the # from filenames. Thank you for the fixes.

It seems like there is one more issue - videos playing are not just from the selected playlist though.
Earlier I though this might have something to so with my messed up folder broswer, but the issue is still here even when folder browser is clean now.

lets assume a folder structure -

• parent
  |- abc
  |- def
  |- ghi
  |- xyz

and in docker-compose, the root folder is mounted to erin - ./parent/:/srv/videos:ro

And that erin is behind a reverse proxy (caddy-docker-proxy) - for the site erin.site.local.

In folder browser, when I hover over playlist def/ghi, I see the url is shown as https://erin.site.local/def/ghi - this is good.
But when I click on the url, the current browser url remains the same erin.site.local without the selected folder appended to url. The videos playing are also from all other folders inclusive.

Should the url be changing to https://erin.site.local/def/ghi instead of staying the same https://erin.site.local ?

Even when I try to open the url https://erin.site.local/def/ghi in new tab - the videos are still selected from other folders.

Is there a different issue with only picking up the files from a selected folder ?

Edits - I fixed the example urls and folders to accurately depict the issue.

[will-moss]

Update 1 : I reproduced the issue. I am working on it. Very sorry for the inconvenience.

Update 2 : You can ignore the text below, and jump to my latest comment.

Alright, thanks for reporting back, and I'm glad one issue is sorted.

As for the playlist-filtering not working, I'll try to help :

• Yes, the URL is supposed to change when you pick a playlist from the list. I find it weird that, on hover the link shows, but on click, the URL stays the same.

• When at the root /, no filter should be applied, and all the videos will be shown. But when at the path /def/ , only the videos under the /def/ folder and its descendants should show (so, that includes /def/ and /def/**/*.{mp4,ogg}).

• The filtering is done in the browser, as long as the path in the URL isn't empty. So the issue can't come from the reverse proxy (or at least that's what I believe, but I'm curious as to why the URL doesn't change when you click a playlist link).

• Just a random idea : There is a local cache in your browser (of all the videos available on your server). I think that, if a JS / network error occurs, only the cached files will be shown, and no filtering will apply. I am checking that in the meantime. But, do you see any JS error in your browser devtools? (F12 / Ctrl + Shift + i / Cmd + Option + i).

I can't reproduce the issue locally so far, but I'll try and send you a video of my setup.

[will-moss]

This was entirely my bad.

In my local development environment, I try to be as close to production as possible when I run my tests, but I failed on that one.

The issue stemed from the fact that Caddy was configured to redirect all 404s to the home page. But playlists aren't "real 404s", so the configuration had to be slightly edited to prevent that redirection from happening.

I think you can pull the latest image, and never read from me again!

Extremely sorry once again for the time wasted, and hoping that it works now.

(I have pulled the image myself on a new VPS to be 100% sure).

[accforgithubtest]

The latest image has got everything working fine ! I think you have now created a nicely done playlists feature in erin !

I think you can pull the latest image, and never read from me again!

LOL, I find your speedy replies and fixes rather amazing.

Really appreciate your effort, cheers !