{"id":25677046,"url":"https://github.com/iamsainikhil/trimtube","last_synced_at":"2025-04-23T14:42:26.413Z","repository":{"id":43701578,"uuid":"336257270","full_name":"iamsainikhil/trimtube","owner":"iamsainikhil","description":"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).","archived":false,"fork":false,"pushed_at":"2023-01-14T20:44:49.000Z","size":22953,"stargazers_count":10,"open_issues_count":1,"forks_count":4,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-30T00:41:10.471Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://trimtube.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamsainikhil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-05T11:51:11.000Z","updated_at":"2025-03-19T07:40:13.000Z","dependencies_parsed_at":"2023-02-09T20:31:17.579Z","dependency_job_id":null,"html_url":"https://github.com/iamsainikhil/trimtube","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsainikhil%2Ftrimtube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsainikhil%2Ftrimtube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsainikhil%2Ftrimtube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamsainikhil%2Ftrimtube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamsainikhil","download_url":"https://codeload.github.com/iamsainikhil/trimtube/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250455544,"owners_count":21433530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-02-24T14:51:16.061Z","updated_at":"2025-04-23T14:42:26.394Z","avatar_url":"https://github.com/iamsainikhil.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://trimtube.vercel.app/\"\u003e\n    \u003cimg alt=\"TrimTube\" src=\"https://raw.githubusercontent.com/iamsainikhil/trimtube/main/public/logo.png\" width=\"200\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  TrimTube\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/iamsainikhil/trimtube/blob/main/LICENSE\" target=\"_blank\" rel=\"noreferrer noopener\"\u003e\n\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/iamsainikhil/nextjs-prismic-blog-starter?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"http://commitizen.github.io/cz-cli/\" target=\"_blank\" rel=\"noreferrer noopener\"\u003e\n\u003cimg alt=\"Commitizen friendly\" src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\"\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\nTrimTube 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).\n\n# 👀 **Demo**\n\n[https://trimtube.vercel.app/](https://trimtube.vercel.app/)\n\n# 🎉 **Features**\n\nTrimTube provides multiple features like:\n\n- **Search**: Search for a YouTube video or playlist by pasting the entire youtube video or playlist link or just the ID.\n- **Video**: Trim and loop a YouTube video with ability to share the URL as well as adding to playlist(s).\n- **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.\n- **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.\n- **Sort**: Sort a playlist created in the app based on the `title` or `publishedDate` of the videos.\n- **Repeat**: Repeat a single video or the entire playlist or just play through all the videos in the playlist once.\n\n# 🧐 **How to use TrimTube?**\n\n## Search Video\n\n\u003cp\u003e\n    There are multiple ways to search a video in the app.\n    \u003cul\u003e\n        \u003cli\u003e\n        Search with pasted \u003ccode\u003eYouTube Video URL\u003c/code\u003e or a\n        \u003ccode\u003eYouTube Video ID\u003c/code\u003e to find the relevant YouTube\n        video(s).\n        \u003c/li\u003e\n        \u003cli\u003e\n        Visit \u003ccode\u003ehttps://trimtube.vercel.app/video?v=ID\u003c/code\u003e page replacing \u003ccode\u003eID\u003c/code\u003e with \u003ccode\u003eYouTube Video ID\u003c/code\u003e \n        to find the relevant YouTube video(s).\n        ex - \u003ccode\u003ehttps://trimtube.vercel.app/video?v=a6Ur326zJtM\u003c/code\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n \u003c/p\u003e\n\n[Watch Demo - Search Video](https://vimeo.com/676948611)\n\n## Trim Video\n\n\u003cp\u003e\n    Click on \u003ccode\u003eTrim Video\u003c/code\u003e button on \u003ccode\u003eVideo\u003c/code\u003e page and use the trim controls to input the \u003ccode\u003eStart\u003c/code\u003e and \u003ccode\u003eEnd\u003c/code\u003e times in \u003ccode\u003eMinutes\u003c/code\u003e and \u003ccode\u003eSeconds\u003c/code\u003e to \u003ccode\u003eTrim\u003c/code\u003e the video which will loop the video between this interval indefinitely.\n\u003c/p\u003e\n\n[Watch Demo - Trim Video](https://vimeo.com/676948653)\n\n## Create Playlist\n\n\u003cp\u003e\n    There are multiple ways to create a playlist in the app.\n    \u003cul\u003e\n      \u003cli\u003e\n      \u003cp\u003e\n      Search with pasted \u003ccode\u003eYouTube Playlist URL\u003c/code\u003e or a\n      \u003ccode\u003eYouTube Playlist ID\u003c/code\u003e to find the relevant YouTube\n      video(s).\n      \u003c/p\u003e\n      \u003cp\u003e\n      Create a playlist in the app using the \u003ccode\u003eCreate Playlist\u003c/code\u003e button with an ability to edit the name of the created playlist later.\n      \u003c/p\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        On \u003ccode\u003eVideo\u003c/code\u003e page, create a playlist in the modal when saving a video to a playlist.\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/p\u003e\n\n[Watch Demo - Create Playlist](https://vimeo.com/676948508)\n\n## Playlist Controls\n\n\u003cp\u003e\n        \u003cul\u003e\n          \u003cli\u003e\n            \u003cstrong\u003eRepeat\u003c/strong\u003e a video or the playlist.\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003cstrong\u003eShuffle\u003c/strong\u003e the playlist\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003cstrong\u003eSort\u003c/strong\u003e the playlist based on the \u003ccode\u003eTitle\u003c/code\u003e or \u003ccode\u003eDate\u003c/code\u003e.\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003cstrong\u003eFetch\u003c/strong\u003e the remote YouTube playlist and merge any new videos with the local playlist.\n            \u003cblockquote\u003eNote: this option is available only on the playlists that were created using the YouTube playlist URL or ID\u003c/blockquote\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/p\u003e\n\n[Watch Demo - Playlist Controls](https://vimeo.com/676948539)\n\n## Share\n\n\u003cp\u003e\n  Share a trimmed \u003ccode\u003eVideo\u003c/code\u003e or a created \u003ccode\u003ePlaylist\u003c/code\u003e\n  in the app on multiple platforms like\n  \u003ccode\u003eFacebook\u003c/code\u003e, \u003ccode\u003eTwitter\u003c/code\u003e, \u003ccode\u003eLinkedIn\u003c/code\u003e and\n  \u003ccode\u003eWhatsApp\u003c/code\u003e.\n\u003c/p\u003e\n\u003cp style=\"text-align: center\"\u003eOR\u003c/p\u003e\n\u003cp\u003e\n  You can simply \u003ccode\u003eCopy\u003c/code\u003e the URL to share on other platforms\n  as well.\n\u003c/p\u003e\n\n[Watch Demo - Share](https://vimeo.com/676948628)\n\n# 💻 Quick start\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/iamsainikhil/trimtube.git\n   ```\n\n2. **Install the packages**\n\n   Install the packages using the command `npm install`\n\n3. **Environment File**\n\n   Create an `.env` file in the root directory of the project. Add the following properties in it:\n\n   ```sh\n   YOUTUBE_API_V3=\u003cyour YouTube API key\u003e (Required)\n\n   NEXT_PUBLIC_GA_ID=\u003cyour Google Analytics tracking ID\u003e (Optional)\n\n   NEXT_PUBLIC_SITE_URL=\u003cURL of the deployed app\u003e (Optional)\n\n   NEXT_PUBLIC_HOTJAR_ID=\u003cyour project Hotjar tracking ID\u003e (Optional)\n\n   NEXT_PUBLIC_HOTJAR_VERSION=\u003cyour project Hotjar tracking code version\u003e (Optional)\n   ```\n\n4. **Start developing.**\n\n   Navigate into your new site’s directory and start it up.\n\n   ```sh\n   # Go to project directory\n   cd \u003cproject-name\u003e\n\n   # start the application\n   npm run dev\n   ```\n\n5. **Open the source code and start editing!**\n\n   Your site is now running at `http://localhost:3000`!\n\n   Open the `\u003cproject-name\u003e` directory in your code editor of choice and edit the contents. Save your changes and the browser will update in real time!\n\n# ⚙️ Available Scripts\n\n---\n\nIn the project directory, you can run:\n\n- `npm run dev`\n\n  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.\n\n- `npm run start`\n\n  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.\n\n- `npm run build`\n\n  Builds the app for production to the `build` folder.It correctly bundles React in production mode and optimizes the build for the best performance.\n\n  The build is minified and the filenames include the hashes. Your app is ready to be deployed!\n\n  See the section about **[deployment](https://nextjs.org/docs/deployment)** for more information.\n\n- `npm format`\n\n  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)**.\n\n\u003e 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)**.\n\n- `npx pwa-asset-generator ./public/logo.png ./public --icon-only --favicon --opaque false --maskable false --type png`\n\n  Generates favicons and place them in the `public` directory.\n\n- `npx pwa-asset-generator ./public/logo.png ./public/light --splash-only --background lightgray --type jpeg --quality 80`\n\n  Generates splash images needed for apple devices with a light background and place them in the `public/light` directory.\n\n- `npx pwa-asset-generator ./public/logo.png ./public/dark --splash-only --background 'rgba(51,51,51, 1)' --type jpeg --quality 80`\n\n  Generates splash images needed for apple devices with a dark background and place them in the `public/dark` directory.\n\n# **🙌 Contribution**\n\n- Open pull request with improvements.\n- 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.\n- 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.\n\n# **📃 License**\n\nHave a look at the **[license file](https://raw.githubusercontent.com/iamsainikhil/trimtube/main/raw/master/README_images/LICENSE)** for details\n\n# **📧 Contact**\n\nWhether you’d like to discuss about this application or simply say “hello”, I’d love to hear from you.\n\nEmail: **[contact@iamsainikhil.com](mailto:contact@iamsainikhil.com)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamsainikhil%2Ftrimtube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamsainikhil%2Ftrimtube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamsainikhil%2Ftrimtube/lists"}