Skip to content

JustKesha/yt-shorts-compilations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

YouTube Shorts Compilations

Overview | Website | Extension | Contributing | Documentation | License

Lightweight, no-registration online solution for creating, sharing, and watching collections of YouTube Shorts. This project consists of a Web application hosted via GitHub Pages and an optional Chrome extension for easier collection management.

Overview

YouTube currently lacks native support for creating playlists of YT Shorts.
This repository solves that problem by providing a simple way to compile, share, and view Shorts collections.
The optional chrome extension simplifies collection creation with browser shortcuts.

Features

  • No Registration
  • Shareable Links
  • Mobile support

Usage

  1. Go to https://justkesha.github.io/yt-shorts-compilations
  2. Fill in any text that contains links to yt shorts
  3. Click generate

Example Collections:

  1. Collection of 5 YT Shorts
  2. Collection of 5 YT Videos * Experimental wide screen mode

Preview

Here are some preview screenshots from the website, PC & mobile view:

PC View Mobile View

Controls

Action Description PC Mobile
Next Go to the next video in queue Arrow bottom / right,
Scroll down,
Click next video preview at the bottom
Swipe down / right
Back Go back one video in queue Arrow up / left,
Scroll up
Swipe up / left
Seek Go to any video in queue Progress bar at the top Progress bar at the top

Note

To enable swiping anywhere on mobile devices, toggle the lock button on the bottom.
Othewise, swiping will only be avalibble under the video player or on the sides.

Chrome extension

This chrome extension simplifies the process of creating collection links using browser shortcuts.
It allows to add videos you're currently watching to your collections using hotkeys.
You can have from 1 to 4 collections at a time and customize things like thier names, colors and icons.

Features

  • Easy link generation
  • Hotkeys for saving videos
  • Collection customization

Preview

Here are some preview screenshots from the extension popup and the settings page:

Mobile View PC View

Note

Collection backgrounds, unlikes colors, icons & names, are not selectable and are instead generated each time you open the extension popup from 16 possible variations.

Requirements

  • Browser with chrome extensions support - Chrome, Edge, Opera

Installation

  1. Download extensions/chrome directory
  2. Go to chrome://extensions url
  3. Enable "Developer mode"
  4. Click "Load unpacked"
  5. Select the extension directory

Note

If the extension doesn't work, make sure it has all the necessary permissions toggled on.

Usage

  1. Open any YT Shorts video
  2. Click the save hotkey
  3. Repeat several times
  4. Click on the extension icon at the top right
  5. Hover onto the filled collection and click play

Controls

Windows Mac Description
Alt+Shift+Z Command+Shift+1 Save current playing YT Shorts video to collection 1
Alt+Shift+X Command+Shift+2 Save current playing YT Shorts video to collection 2
Alt+Shift+C Command+Shift+3 Save current playing YT Shorts video to collection 3
Alt+Shift+V Command+Shift+4 Save current playing YT Shorts video to collection 4

Contributing

Contributions welcome! Here's how to help:

  1. Fork the repository
  2. Create a feature branch
  3. Submit a pull request with:
    • Description of changes
    • Related issue references

You can also report bugs or create feature suggestions in the Issues tab,
Just make sure you describe the problem properly and dont create duplicates.

Getting Started

Check for "good first issue" label in the issues tab for ideas.
You can ask questions in existing issues or ask to assign you to the issue before starting,
But don't forget to read the related documentation first!

Guidelines

  • Maintain consistent style
  • Test your changes thoroughly
  • Keep the changes focused on one topic
  • Update documentation if needed
  • Update version in manifest when working on extention

Documentation

This section contains minmal project documentation, mainly for contributors.
Read it if you want to have a better understanding of how this application works.

If you feel like the current documentation is missing important information, see Issue #66.

Website

All website files are located in the docs/ folder for Github pages compatibility.
You can find open issues using the "website" label.

Technologies

  • Jquery 3.6.0
  • YouTube IFrame API
  • Google Fonts

API / URL Parameters

Param Alias Description Example
request r, ids, i Unseparated YT video IDs,
duplicates are ignored
...?r=E1RCT6eUyVgilcL2nHJvEc...
startat start, s Starting video index (0-based),
updates automatically
...?r=...&s=3
params p Additional flags (see below) ...?r=...&p=w

Available Flags:

Flag Description
w Experimental wide screen mode, #64

Note

It seems like not long after this repo was published,
YT has added support for wider Shorts formats and the next & previous video buttons on pc.

Ambient Colors

This feature was added to mimic YT's "Ambient mode",
Although is a lot simpler. It works as follows:

  1. Dominant video thumbnail color is calculated
    * Left & right sides of the image are ignored due to the vertical format
  2. Saturation & lightness are adjusted for more contrast
  3. Simple css animation is used to simulate a dynamic change

Example thumbnail:
Example image
Result: gray #959D9D

Screen Lock

There's a problem with using IFrame where it grabs and retains focus during interactions (clicking, scrolling, etc.), which is especially problematic on mobile devices (prevents swiping actions) where most part of the screen is covered by the Iframe element and unfocusing can be problematic.

To adress this, a workaround has been implemented to disable Iframe controls on mobile - Screen Lock Mode (lock icon at the bottom). When enabled - it will lock away video controls (like volume, playback, etc.) but allow for swiping through queue. The state of this setting is saved between sessions in browser's local storage.

Chrome Extension

All files are located in the extensions/chrome/ folder.
You can find open issues using the "extension" label.

Permission

Required Permission Reasoning
storage Local storage is used for saving collections data
activeTab To detect currently playing YT video

A more fresh version of this list can be found in manifest under "permissions".

About

Free web application that allows to easily create, share and watch collections of YouTube Shorts

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •