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

The process to installing frames is straight forward to begin, visit https://frameshomebase.maix.ovh and follow the setup process. A 'frames.env' file would be downloaded once the setup process is complete.

Run Locally

Clone the project

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

Go to the project directory

  cd frames

Place frames.env in the directory then rename it to .env

  mv frames.env frames/.env

Install dependencies and set up database

  npm install && npx prisma db push

Build the server

  npm run build

Start the server

  npm run start

How to arrange the files

For movies, it is imperative that only the movie file itself is placed directly in the movie folder like so
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

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
You can see all the genres for the medias available in your library. Your library can also be sorted by decades depending on when they were released or first aired.
The playlist feature is still in development
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 produce 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 the AirPlay/Cast button (if available). The volume controls
- If not logged in as a guest user, there are two additional buttons the download button(not functional yet) and the Share button
- On the right side of the controls exists the fullscreen button, the subtitles button and the up-next 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.

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 lon as all; parties remains connected the session allows you to actually marathon 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 right clicking on media posters you can modify the information of the media. The images, TMDB ID
The up next UI when the present video is done playing
Frames has the collection page that shows you default collection for media in your library
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
Admin accounts can create and manage auth keys. These keys are used to create new accounts or download videos