Giter Club home page Giter Club logo

ytparty's Introduction

YTParty

Project Status: Active GPLv3 license

Watch YouTube with friends!

Check us out here!

Using YTParty

  • Navigate to YTParty and make an account if you don't already
  • Optionally install the Chrome Extension (See below for guide)

Creating a room without the Chrome extension

Once signed in, head over to the create room page and follow the room creation steps

Creating a room with the Chrome extension

Once you have linked your account, simply navigate to a video you want to create your room from then press the YTParty logo to open up the extension and follow the on-screen prompts.

Queueing videos without the Chrome extension

When you are in your player room, ensure you have clicked on the chat and then press ctrl + m to open up the player menu. From here, you can manipulate the queue.

Queueing videos with the Chrome extension

Perform the same steps as you did to create a room with the extension, but this time simply press the add to queue button.

How to add the Chrome extension

    1. Download or pull this repository
    2. Extract the zip folder of this repository if necessary
  1. Navigate to the extension/Chrome folder. Copy all these files to a safe location such as Documents/YTParty so they do not get deleted.

  2. In Chrome, navigate to chrome://extensions and enable developer mode

  3. Click Load Unpacked and navigate to the Documents/YTParty folder (or wherever you put the extension files)

  4. Click Select Folder. The extension should now be loaded.

No FireFox extension?

I did make a FireFox extension, but I have since stopped developing it. This is due to the irritating nature of untrusted FireFox extension security and the difficulty of use for the end user. As such, I will not be returning to FireFox extension development for the forseeable future.

Running YTParty

YTParty requires a config file named config.properties with the following fields:

#Hibernate Options
hibernate.User=YTParty
hibernate.Password=n0th1n9_t0_533_h3r3
hibernate.ConnectionURL=jdbc:postgresql://localhost:5432/YTParty
#Tomcat options
http.port=8080
#reCaptcha Token
captcha.Token=n0_h1dd3n_m355ag35

As well as a PostgreSQL server. Ensure that the database used in the connection URL exists on the PostgreSQL server. PGAdmin is recommended for database management.

Pull Requests and Contributions

It is unlikely that I will accept PR's. This is due to my own concerns for security. If you have a suggestion or a problem, please create a GitHub issue instead.

Technical Support

If you have any issues please create a GitHub issue

ytparty's People

Contributors

elementalmp4 avatar dependabot[bot] avatar sebastianbeattie avatar

Stargazers

 avatar  avatar  avatar

Watchers

Malte B. avatar  avatar

ytparty's Issues

Implement video sync

Add player change listener, add gateway events, implement responses in client to player updates

Signup improvements

  • errors are not displayed correctly
  • password rules are not displayed
  • tokens may not get stored properly

Add image upload support to client

Add an event listener to listen to image pasting
A local message will notify you that you have uploaded an image and provide a base64 url so the user can see a preview
When the message is sent, the server message handler should forward the image string, but it should not be saved to the database.
The message will contain a new field called image

Create ChatMessage interface

Create a standardised service for broadcasting messages to a party.
Should take a ChatMessage class and construct a uniform JSON representation of the message.

Improve user settings

User friendliness is very important so the user settings page needs some helpful comments

XSS Vulnerability

HTML tag characters should be escaped to prevent code execution in the chat

Add OG tags to HTML

Add OG tags to HTML pages so that Facebook, Discord etc can show rich embeds

More prominent text boxes to instruct a user to do shit

When I try to login without valid credentials, a small white text is being displayed to notify me that the credentials are not valid.
I would make that more prominent, it's extremely easy to overlook that text and think "This shit not working"
Maybe redirect them to a site that displays the message or make a pop up that notifies you that you have entered some wrong credentials.
I suspect that you have more occasions where this can happen.
Whenever something like this happens you should use a pop up rather than an almost invisible text

When speaking of a pop up I don't mean window.alert(). There are wonderful ways to make you own pop ups that look waaay better than that ugly ass window.alert()
For example with bootstrap: https://getbootstrap.com/docs/4.0/components/modal/#live-demo
If you think bootstrap is assy and not worthy for your page, then this is a respectable opinion. Bootstrap can suck ass sometime.

grafik

Navigation

Make Navigation buttons for the app. I don't want to be imprisoned into the settings menu

Replace hCaptcha with reCAPTCHA V2

Speaks for itself, hCaptcha is easy to implement but stinky to actually use
reCAPTCHA is a nightmare to implement but much more familiar

Redirect improvements

Redirects should use an appropriate protocol. Eg local tests use http, deployment uses https

Sharable links

If I have a buddy to invite to a YTParty lobby I don't want to give them an unhandy code to join but rather a link that connects him automagically to my lobby once he clicks on it.
If he is not registered or logged in, they ofc should do that first but after they log in they should be instantly redirected to the lobby they have been invited to
Make a nice button for it so it instantly gets copied to my clipboard

Add site navigation

When the header is clicked, it should redirect the user to the last appropriate home page (index or home)

Settings security improvements

  • Change password should ask for current password
  • Delete account should ask for current password
  • After account deletion, user should be sent back to main menu

Video Queues

Allow users to queue videos
Users may view the video queue
Users may add and remove videos
Users may skip videos

Add chat emotes

Add custom emotes to chat, or enlarge emotes when sent in chat

Implement Chat system

Users should be able to send messages and receive them from other users and the system.
If a user sends 2 messages in a row, their username should not be repeated.
Messages should be stored in the DB for the length of the party and then deleted so that they can be automatically reloaded.

Queue

Provide functionality to add multiple videos to the queue

This room doesn't exist

How am I in the room if it doesn't exist?
Redirect users to the main menu if the room doesn't exist and give them a popup or something that notifies them that the room doesn't exist anymore

Redirect to home.html if logged in

If I log into YTParty and then go to the main page again I don't want to log myself in again. I want to land on the home menu.
If I manually go to /home.html my session is still valid so I suppose you just need to check wether I am already logged in or not and redirect to the main menu instead to the login menu

Textfield for new links

A chat command to control the room is neat and all but I'd rather paste a link into a textfield to play a video.
Add a textfield and a button to queue a new video

Create SystemMessage interface

Like with the ChatMessage issue (#2) this system should take in a SystemMessage class and broadcast it to a party
This message type will be used to communicate party events (change video etc)

Add email for password recovery

An email sending service will be added
Users who sign up will need to provide an email which will be verified
Users who forget their passwords like silly geese will be able to reset them

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.