right now the current code has the play button and pause button affect the volume of the stream. the play button should only play and pause the video, not mute and unmute.

Firefox allows videos to be autoplayed with audio. When a user connects to sync with Firefox, the video should automatically start playing unmuted.

Chromium based browsers like Chrome, Opera, and Safari require user interaction before a video can be played with audio. If the user connects to sync with any browser that isn't Firefox, a big play button should be displayed that the user has to click before starting the video.

By forcing the user to click a play button first, we'd be able to always start the stream with audio enabled, instead of starting the video without audio and requiring the user to unmute.

Research which media formats are used as playlist files and what it would take to add support for reading files from them. It may be as simple as running a command to get the files in the playlist and parsing the output in node, or there could be node packages for reading media files natively.

Error: /media/0000-00-00.m3u is an unsuported file type
[nodemon] app crashed - waiting for file changes before starting..

media folders often old non-video / non-audio files (ie. .m3u playlists, .nfo text, .jpg cover art). You already examine each file to get stream duration, could raise a warning about incompatible files and just keep going without including them in the playlist the daemon generates at starttime.

There should be a button to make the video fullscreen, right now the only way to do that is by right clicking.

/sync/media-player.js:49
throw Error(${url} has no video or audio content);
^

Error: ./public/media/tiny-bird.webm has no video or audio content
at playlist.forEach (/home/zeus/sync/media-player.js:49:31)
at Array.forEach ()
at MediaPlayer.getMediaTypes (/home/zeus/sync/media-player.js:32:23)
at MediaPlayer.init (/home/zeus/sync/media-player.js:112:14)
at Object. (/home/zeus/sync/server.js:42:13)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)

Seen:

• pressing 'm' key during playback will toggle mute
• clicking the speaker icon will toggle mute and change the speaker icon to a cancelled-speaker icon and back

Desired:

• pressing 'm' key will also change the speaker icon to a cancelled-speaker icon and back.

this is fairly simple problem, the resyncing needs to take place in socket-app.js since that is the easiest way to access the server time rather than having the calculations be done in the client which as of this writing has no knowledge of what the server time is unless the page is refreshed or the player itself is instantiated.

Whenever a media file ends, the sync server should update the playlist from the current state of the media folder. Before a media file starts playing, the length of the video should be checked, instead of only checking once when the server first starts.

The readme does not list the command line dependencies of the project (ffmpeg & ffprobe) and it also doesn't explain the public/media/ folder.

currently the daemon listens (and serves http) on port 3000.
some sites already have Node.JS daemons (or other daemons) using port 3000. Would need the daemon to listen on other port #s, especially is using an SSL offloader for serving https.

Would be great if I could tell it to use a UNIX socket file instead of tcp/ip, too, but maybe that's asking too much.

If you make the video fullscreen, the controls / progress bar are not visible.

when the enviornment variable is unset play through the list and don't repeat. as requested by mozai-kun @mozai

Currently ffmpeg is being called by node as a string, command and arguments combined. This lead to a severe bug which locked up the server and clients when files were added to the playlist with "&" in the filename.

Options passed to commands run by node should be sanitized, like the way they are in fishy's rainbow module - https://github.com/itsrachelfish/fishy-bot/blob/master/modules/rainbow.js#L73-L84

The background is white, which doesn't look very good unless you right click and make the video fullscreen.

Using the master branch on 2019-07-28. Running sync my browser is looking for files that aren't there:

• 404 /bulma.min.css
• 404 /fscreen.js
• 404 /solid.svg
• 404 /favicon.ico

... favicon.ico is probably a genuine oversight. The other three could be floatsam from a different branch that was not completel merged into the 'master' branch.

Probably another quiet update to the websockets standard that will break stuff when Chrome+Firefox decides to be a hardass. Seeing this in the JS console

socket.io.js:8 WebSocket connection to 'wss://sync.wetfish.net/socket.io/?EIO=3&transport=websocket&sid={redacted}' failed: Error during WebSocket handshake: 'Connection' header value must contain 'Upgrade'

When this daemon will be used for scheduled events, would be nice to say "present the media list once, then quit." My particular use-case is N=2, but I could simulate that by having multiple links to the same file in ascii order. (ie files named A,B,C,D,E,F,G where E links to B and F links to C).

I could have two cronjobs, one to start and a second hours later to pkill the first, but that'd require running ffprobe on every file and having to do the duration arithmetic on paper. Would rather just say "do each file once then quit", or even better "do the folder N times then quit."

There should be a mute / unmute button as well as a volume control slider.

The selected volume and mute should persist, even after pausing and restarting the stream.

Could use more instructions, needed a human to tell me "it only looks in ./public/media/"

Should mention that is expects every file in ./public/media/ to be video files (had an *.m3u file in there, and it crashed the daemon).

Should mention is only scans the dir and gets media duration information at start-time. I removed a file during runtime and it still sent the URL to that file to clients, and waited for that file's duration before prompting clients to fetch/play the next. I also swapped out one of the files for another (re-using the filename), and it DID send the new data, but it prompted the clients to fetch/play the next file at the end of the original file, not at the end of the new file.

Should mention the webbrowser client can toggle mute-audio by pressing the Shift key. (nice feature, useful)

Should mention webbrowsers usually don't play audio of autoplaying

Should mention the progress bar appears immediately on mouseover, but has an N-second delay to vanish on mouseout.

When the hover menu is active (the user is moving their mouse around), your cursor is visible, as it should be However when the menu disappears, so should your cursor!

as it stands Sync is working and working well, however, the current code could be refactored and simplified and leverage the vue.js framework more. one instance could be moving the template code in vue-app.js into it's on vue file, and importing it into vue-app.js.

The server sends a websocket heartbeat to clients every three seconds which update the current media timestamp (vueApp.serverTime). This means that if you click the resync button repeatedly, you will always be brought back to the last time that the server sent you a heartbeat.

To keep clients in sync more accurately, a date object should be saved on the client side each time the server sends a new timestamp. When you click on the resync button, the mediaPlayer.currentTime should be set to vueApp.serverTime plus the difference between the current time and the last heartbeat.

What I tried:

• set up nginx with proxypass so it can handle the SSL certs, but did not use '/' as the location

  # --- meleeman's sync sometimes in a docker container
  location /sync/ {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://127.0.0.1:9623/ ;  # ending slash is important!
  }
  

• started in a docker container

  docker run -it --publish "9623:3000"  \
  --volume "${mediadir}:/home/node/node_modules/sync/public/media" \
  --env "URL=https://${hostname}/sync/media/" \
  wetfish-sync:latest  -- "--m3u=public/media/playlist.m3u"
  

What I expected:

• the show at https://hostname/sync/

What I got:

• got the HTML for the player page, but it appears blank
• '404 Not Found' errors for things like /style.css, /vue.js, /socket.io.js and more

Hi, I just found this repo. From the description it looks like the idea is to

• playback an audio file in sync to a youtube/vimeo video, eg to replace the audio stream that would be embedded in that video.

If that is the case, it would be great to add a minimum example
If thats not the case some description of what the purpose of this project is would be nice.

macOS 10.13, Firefox 67.0.4

Seems to work as expected, but I have this warning in the dev condole at (client) starttime:

Source map error: request failed with status 404
Resource URL: http://[hostname]:3000/socket.io.js
Source Map URL: socket.io.js.map [Learn More]

Also seeing this in the js console repeatedly:
removing (controls.js:12:21)

As a part of refactoring the project (#51) we'll want to start using this new UI.

When first opening the video player

Due to browser restrictions, we can't autoplay a video with audio when the page is first loaded. The user has to actively click on a button before we can start playing video with audio. This is how the current sync site works, however we want the play button to be more prominent with a blur effect on the background.

The play button should be grey by default and blue on hover.

After clicking the play button

After clicking on the play button, the controls will appear and the video should start playing.

Here are all of the icons used in the new design:
SVG icons.zip

Playlist sidebar

For now don't worry about implementing the playlist sidebar. You can make the HTML / CSS for the sidebar if you want, however the backend is going to need to be updated to send playlist information. Additionally, we may want to hide the names of files in the playlist until they have started playing to prevent spoilers. Or we might want to hide the playlist sidebar entirely unless you are an admin.

There should be a button to force your client to the current server time.

You could use this icon - https://fontawesome.com/icons/redo-alt?style=solid

Then it wouldn't block subtitles!

The version of nodemon we are currently using has known security vulnerabilities according to npm. nodemon is unnecessary and the package.json file has already been updated to add a command which simply runs a node server.

Inevitably we are going to add more configuration options and it would be nice if all of them were exposed in a single place.

There should be a gitignored config file (and a tracked config example file) for all of the options in the project, similar to an .env file in Laravel.

specifically this seems to happen on remote media, some theories as to why this might happen would be due to sync making a remote request to load a video which the browser controls by default will prompt the user to click the play button. consequently the play button is also not reactive and should display the behavior so users understand more quickly that the video is paused and should be clicked to play the media.

When you select a volume, it should get saved in localstorage. Then when you come back to sync the volume should be automatically set to whatever the saved value is.