search

wetfish / sync

Synchronize audio and video between friends! Supports HTML5 video, YouTube, and Vimeo
27 stars 8 forks source link

New sync UI #57

Open itsrachelfish opened 3 years ago

itsrachelfish commented 3 years ago

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

When first opening the video player

sync-big-play-button

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

sync-playing

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.

Meleeman01 commented 3 years ago
  1. refactor with vue-cli -build custom vue-cli project with eslint -configure vue.config.js so it's easier for node.js to serve -refactor controls.js and mediaplayerControls component into mediaControls.vue -refactor socket-app.js into socket.vue -refactor style into each component, or into app.vue -refactor audioPlayer component into audioPlayer.vue -refactor videoPlayer component into videoPlayer.vue -configure server to serve new files
  2. Update UI -blur screen on start, include new playbutton -create transparent mediaplayer controls,and buttons that are relevant to current backend -create ? mark button -create cog button -create clients button on lower left of screen
  3. Add frontend stream management interface with websocket auth/login system. -create a db or use an environment file to store a username/password combo -come up with an auth system that is seamless and can authenticate an admin on the frontend -create admin edit playlist, and add playlist, show current media playing -add cog for options in the upper right of interface for potential options, maybe server configuration?