GitHub

Logo

Frames

Frames is a VOD streaming service built with react and NextJs around the Google Drive API.

What is frames and how does it work ?

Frames is a web application that allows you to store, organise, download and stream media contents available on your Google Drive. The application enables you share this library without compromising the integrity of the original files. It organises the Movies and TV shows on your drive account, providing you with their trailer, HD images and other info

Installation

Clone the repository

  git clone https://github.com/Eleven-am/frames.git

Install the dependencies

  npm install

Go to the project directory

  cd frames

Open the framesConfig.ts file and configure the parameters To do this you need to open the file in your favorite text editor, have a Supabase project, a TMDB API key, FANART API key and a Google Drive API credentials and token.

  vim framesConfig.ts

Once you have configured the file, you can generate an environment file with the following command:

  npm run generate-env

Once you have done this, you can build the application with the following command:

  npm run setup

The application will be available on http://localhost:3000/

How to arrange the files

For movies, it is recommended that only the movie file itself is placed directly in the movie folder like so but folders containing the movie file can be placed in the movie folder.
For TV shows every Show should be placed in its folder like so
When arranging the episodes you have two options
- Place each episode in its corresponding Season folder, like so (Recommended)
- Alternatively you can place them directly in the Show folder but only if they can pass this s|SXX .. eE|XX naming scheme, for example;
  - S01 - E01
  - S01 randomText E01
  - s01e01 | S01E01 like so

Images and Features

Disclaimer: The Social OAUTH feature requires a connection to a Phoenix-Elixir server. I intend to make my private server available to the public in the future.

The boarding page includes social authentication methods as well as email. Every user registered must be provided an auth key
The home page includes (ideally 7, may be less or 0) trending media that are available in your library. A synopsis of the media and trailer are also available directly from here

The navigation bar

All the movies and tv shows available in the library are show in descending order from most recent or trending to less recent. The media can be filtered by genre or decade. just by interacting with the page.
Frames has the collection page that shows you default collection for media in your library
Here's how a media's metadata is displayed on frames
Media produced by a specific company can be seen by simply clicking on the company's name in the details pane
- Clicking on the company's logo begins playback of all the media produced by the company in the order they were made available by said company
Media a specific actor or director took part in creating are easily viewable by clicking on their name
- Clicking on the person's name begins playback of all the media they have taken part in.

Frames(aka the video player)

Frames supports only mp4 files. These files are streamed securely to the user and your Google credentials are never made available to the client.
- The left controls include, in that order, the AirPlay/Cast button (if available), the share button, the playlist button, the volume controls and download button
- If logged in as a guest user, the download button and the Share button are not available
- The right side controls include the player settings button(in development), the groupwatch button, the picture in picture button, the subtitle button, the up next button and the fullscreen button
  - Clicking on the up next button plays the next video as expected.
- Frames supports only three subtitle languages at this point (English, French, and German)
GroupWatch: This feature allows you to watch a media with your friends at the same time.

Disclaimer: The groupwatch feature requires a connection to a Phoenix-Elixir server. I intend to make my private server available to the public in the future.

How it works
- To create a new session click on one of these buttons The join button in the video player The join button in the info page
- When a session is created a link is copied to your clipboard anyone with access to this link can join the session
- A session spans multiple videos. As long as all parties remain connected, the session allows you to actually binge-watch videos together.
- There's no limit to the amount of people that can join a session
- Users in a session can send a ping to themselves with a maximum of 280 characters. Ping history isn't saved
Frames has AirPlay and Chromecast functionality built in
- Obviously frames controls the remote player based on local interactions

Miscellaneous

By clicking on the edit button inside a media page you can modify the information of the media. The images, TMDB ID
The up next UI when the present video is done playing
Frames allows any non-guest user download video files provided they are given a key from the admin(These links are only valid for 2 hours)
You can add three personalised categories to the home page.
- These categories include a list of previously chosen media and a name to display said media
- Two of these categories appear like this
- And the last one appears like this
- Adding these editor picks is as easy as visiting the settings page => Mange => manage picks.Here you can modify or create new editor picks to display on the homepage
- You can also delete editor picks by clicking on the delete button
- The home page has infinite scrolling, it will load more content as you scroll down based on the amount of content you have and the user's activity
Admin accounts can create and manage auth keys. These keys are used to create new accounts or download videos