kyle8998 / vynchronize Goto Github PK
View Code? Open in Web Editor NEWWatch videos with friends online with the new real time video synchronization platform
Home Page: https://www.vynchronize.com/
License: MIT License
Watch videos with friends online with the new real time video synchronization platform
Home Page: https://www.vynchronize.com/
License: MIT License
After adding the event listeners, the mobile site will crash if it syncs.
I'm not too sure what is causing this, but I would guess it has to do with the mobile player.
When a new socket joins a room, they are no longer automatically syncing to the host as they should be.
When users disconnect/join the online users often gets glitched and does not display the correct users.
For some reason, each client that joins the server connects as two separate sockets. This can impact some events that occur.
User should be able to either paste the entire video URL or just the video ID. This may be difficult due to different players, but it should be simple string manipulation/regex formatting.
Only some of the times, the video will not sync the host with a new socket that has joined late. This can be reproduced by playing a dailymotion video on one socket, then joining the room with another socket multiple times.
This must have something to do with the asynchronous calls.
On the youtube player, the seeking is not working when the player is paused. This may be caused due to the sync call rather than a seek call like the vimeo player.
On very rare occasions, when syncing and using event listeners across a computer and mobile, it will trigger an infinite loop. This will cause the website to eventually crash due to the amount of requests.
The issue has something to do with the event handlers
Due to how different the vimeo player is structured, there are many bugs regarding how the functions are called. This is because all the functions are asynchronous and return promises. One example is the sync function not always syncing properly.
Add functionality of a different player along with the YouTube API.
All online users appear, not just online users for the room.
Expand the host socket functionality into event listeners. Only allow the host to control event listeners. This should stop the bugs occurring with event listeners.
The video often isn't perfectly in sync at all times. Possibly implement an asynchronous auto sync function to sync with the host.
Actions done in separate rooms sometimes affects each other. This is very important, and actions done in one room should only affect that one room.
Vimeo has a seeked function that can return details/perform actions immediately after a seek call. This does not exist on YouTube/DailyMotion.
Perhaps it would be a good feature to add a sync call as soon as a time is seeked.
Fix all improper code indentation, unneeded comments, etc.
Currently, entering a link with a playlist results in invalid parameters.
Use event listeners to find player state changes, for smooth pause/plays.
Redesign the chat room front end. Right now it looks clunky, and does not fit well with the video player.
On certain occasions, the event listeners would cause an infinite loop leading the site to crash. This is probably caused when more than 2 users call an event at the same time, and it is trying to sync across multiple sockets leading into an endless feedback loop.
Should have alerts that pop up when certain actions occur. (e.g. host change)
Turn off the lights feature does not work with Vimeo player div.
Socket room variables are not being set properly. Trying to access the undefined currPlayer var leads to a server crash
Have a descriptive readme that documents and outlines the functionality.
Integrate a video chat within the page for even more interaction with friends.
Rearrange elements on the page. Move the chat box in a location in which it can be used while watching the video. Maybe directly next to the video.
When a new socket joins a room, it should automatically sync to the correct player and video. At the moment it will sync to the right video only if it is on YouTube. The player does not change.
This will require changing of the syncVideo() function. This may also lead to invalid syncs when syncing on another player.
Have a database to hold all of the data. This way when everyone leaves a room, everything is saved for the next session. This also is a better way of keeping the data than having a host socket.
For some unknown reason the heroku app completely crashes and has to be redeployed. This occurred when two sockets were connected to a room, then went inactive for a bit of time.
I'm currently not aware of the exact issue at the moment.
Add support with the vimeo video player api.
Currently the room variables are set based on the initial host.
If the host leaves the room, and another socket joins the video will be reset because there will be no host to grab the data from. A fix could be just reassigning the host socket when the host leaves. Another solution could be to create a database and constantly add the room data to the database.
Have some sort of continuous integration tests for maintainability.
What would be really cool and unique would be the ability to switch videos without losing the place of the previous video and be able to freely switch between videos.
Host should be able to change so other people can have native control.
Currently if you join a room late on dailymotion it will sync to that video, but when you change back to youtube it will be at 00:00. If the host has played the video before, the sockets will be out of sync. This can be fixed by adding a sync call for every change player call.
Add actual icons such as a play/pause icon for users to see.
When syncing it via event listeners, the sync/seek function is called repeatedly leading to an overflow. This can cause everything to crash.
A possible fix is to have some level of error correction to prevent simultaneous seek/sync calls.
The ability for a user to simply paste in a link to any page with a video and have it load into the player ready to be synced.
This is what I first envisioned the application to be like, but found it to be rather challenging. I'm not sure if it will work with most links, but I would like to look into it more in the future.
Have a small soundboard to play reaction sounds to the room. Sounds like a fun feature.
Have the ability to search for videos directly on the site rather than going to youtube and finding the link.
Create a dark mode function where the user can block every element on the screen aside from the video player, simulating a darkened room.
When the host socket leaves the room, it should be reassigned. Host can be reassigned if another socket clicks on the button, but it should be automatic if the host leaves.
Limit alerts.
When the host seeks to a point in the video that has not been loaded yet, it will pause for the other sockets and play on the host. It needs to be able to play on all sockets.
Redesign the site for mobile devices
Generate unique URLs for each room for easy access.
When videos are played then the host switches to a different player, the original video may be triggered when a new client joins the room.
This is caused because the currPlayer variable is not updating before the sync occurs. This is an issue of async calls.
Add event listeners for seamless synchronization on Players such as Daily Motion and Vimeo.
Require users to enter a name. It becomes less intuitive if everyone is an empty string.
Put the video in a corner or something when scrolling away. That way you can still watch when on focused directly on the player.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.