https://github.com/iamsainikhil/trimtube

TrimTube is a web application which allows user to fetch video or a playlist using a YouTube video or playlist link. This app also features a media player that allows the user to trim and loop any portion of a YouTube video with ability to save the video(s) to a playlist(s).
https://github.com/iamsainikhil/trimtube

axios commitizen css-in-js dayjs google-fonts media-player next-pwa nextjs react react-copy-to-clipboard react-ga react-icons react-lottie react-toastify react-youtube scss theme-ui youtube-api-v3 youtube-iframe-api youtube-repeater

Last synced: 14 days ago
JSON representation

Host: GitHub
URL: https://github.com/iamsainikhil/trimtube
Owner: iamsainikhil
License: mit
Created: 2021-02-05T11:51:11.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2023-01-14T20:44:49.000Z (over 2 years ago)
Last Synced: 2025-03-30T00:41:10.471Z (about 1 month ago)
Topics: axios, commitizen, css-in-js, dayjs, google-fonts, media-player, next-pwa, nextjs, react, react-copy-to-clipboard, react-ga, react-icons, react-lottie, react-toastify, react-youtube, scss, theme-ui, youtube-api-v3, youtube-iframe-api, youtube-repeater
Language: JavaScript
Homepage: https://trimtube.vercel.app
Size: 21.9 MB
Stars: 10
Watchers: 0
Forks: 4
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

TrimTube

# 👀 **Demo**

[https://trimtube.vercel.app/](https://trimtube.vercel.app/)

# 🎉 **Features**

TrimTube provides multiple features like:

- **Search**: Search for a YouTube video or playlist by pasting the entire youtube video or playlist link or just the ID.
- **Video**: Trim and loop a YouTube video with ability to share the URL as well as adding to playlist(s).
- **Playlist**: View videos added to a playlist all at one place. Ability to save, share, and delete a playlist. Option to individually remove a video from the playlist.
- **Sync**: Ability to sync a playlist with that of the YouTube playlist if the playlist was created locally in the app using the Search with playlist feature.
- **Sort**: Sort a playlist created in the app based on the `title` or `publishedDate` of the videos.
- **Repeat**: Repeat a single video or the entire playlist or just play through all the videos in the playlist once.

# 🧐 **How to use TrimTube?**

## Search Video

There are multiple ways to search a video in the app.

Search with pasted YouTube Video URL or a
YouTube Video ID to find the relevant YouTube
video(s).

Visit https://trimtube.vercel.app/video?v=ID page replacing ID with YouTube Video ID
to find the relevant YouTube video(s).
ex - https://trimtube.vercel.app/video?v=a6Ur326zJtM

[Watch Demo - Search Video](https://vimeo.com/676948611)

## Trim Video

Click on Trim Video button on Video page and use the trim controls to input the Start and End times in Minutes and Seconds to Trim the video which will loop the video between this interval indefinitely.

[Watch Demo - Trim Video](https://vimeo.com/676948653)

## Create Playlist

There are multiple ways to create a playlist in the app.

Search with pasted YouTube Playlist URL or a
YouTube Playlist ID to find the relevant YouTube
video(s).

Create a playlist in the app using the Create Playlist button with an ability to edit the name of the created playlist later.

On Video page, create a playlist in the modal when saving a video to a playlist.

[Watch Demo - Create Playlist](https://vimeo.com/676948508)

## Playlist Controls

Repeat a video or the playlist.

Shuffle the playlist

Sort the playlist based on the Title or Date.

Fetch the remote YouTube playlist and merge any new videos with the local playlist.

Note: this option is available only on the playlists that were created using the YouTube playlist URL or ID

[Watch Demo - Playlist Controls](https://vimeo.com/676948539)

## Share

Share a trimmed Video or a created Playlist
in the app on multiple platforms like
Facebook, Twitter, LinkedIn and
WhatsApp.

You can simply Copy the URL to share on other platforms
as well.

[Watch Demo - Share](https://vimeo.com/676948628)

# 💻 Quick start

1. **Clone the repository**

```bash
git clone https://github.com/iamsainikhil/trimtube.git
```

2. **Install the packages**

Install the packages using the command `npm install`

3. **Environment File**

Create an `.env` file in the root directory of the project. Add the following properties in it:

```sh
YOUTUBE_API_V3= (Required)

NEXT_PUBLIC_GA_ID= (Optional)

NEXT_PUBLIC_SITE_URL= (Optional)

NEXT_PUBLIC_HOTJAR_ID= (Optional)

NEXT_PUBLIC_HOTJAR_VERSION= (Optional)
```

4. **Start developing.**

Navigate into your new site’s directory and start it up.

```sh
# Go to project directory
cd

# start the application
npm run dev
```

5. **Open the source code and start editing!**

Your site is now running at `http://localhost:3000`!

Open the `` directory in your code editor of choice and edit the contents. Save your changes and the browser will update in real time!

# ⚙️ Available Scripts

---

In the project directory, you can run:

- `npm run dev`

Runs the app in the development mode.Open `[http://localhost:3000](http://localhost:3000/)` to view it in the browser. The page will reload if you make edits. You will also see any lint or nextjs develop errors in the console.

- `npm run start`

Runs the app in the production mode.Open `[http://localhost:3000](http://localhost:3000/)` to view it in the browser. The page will reload if you make edits. You will also see any lint or nextjs develop errors in the console.

- `npm run build`

Builds the app for production to the `build` folder.It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about **[deployment](https://nextjs.org/docs/deployment)** for more information.

- `npm format`

Formats the app files like _js, jsx, json, and md_ using Prettier. You can learn more about the format **[here](https://prettier.io/docs/en/install.html)**.

> Note: `pwa-asset-generator` tool is used to generate the below PWA assets. You can learn more about this tool **[here](https://github.com/onderceylan/pwa-asset-generator#features)**.

- `npx pwa-asset-generator ./public/logo.png ./public --icon-only --favicon --opaque false --maskable false --type png`

Generates favicons and place them in the `public` directory.

- `npx pwa-asset-generator ./public/logo.png ./public/light --splash-only --background lightgray --type jpeg --quality 80`

Generates splash images needed for apple devices with a light background and place them in the `public/light` directory.

- `npx pwa-asset-generator ./public/logo.png ./public/dark --splash-only --background 'rgba(51,51,51, 1)' --type jpeg --quality 80`

Generates splash images needed for apple devices with a dark background and place them in the `public/dark` directory.

# **🙌 Contribution**

- Open pull request with improvements.
- If you have any new idea, check the **[feature request](https://raw.githubusercontent.com/iamsainikhil/trimtube/main/blob/main/.github/ISSUE_TEMPLATE/feature_request.md)** template to create a request.
- If you found any issue or a bug, check the **[bug report](https://raw.githubusercontent.com/iamsainikhil/trimtube/main/blob/main/.github/ISSUE_TEMPLATE/bug_report.md)** template to create a report.

# **📃 License**

Have a look at the **[license file](https://raw.githubusercontent.com/iamsainikhil/trimtube/main/raw/master/README_images/LICENSE)** for details

# **📧 Contact**

Whether you’d like to discuss about this application or simply say “hello”, I’d love to hear from you.

Email: **[[email protected]](mailto:[email protected])**

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/iamsainikhil/trimtube

Awesome Lists containing this project

README

TrimTube