viewtube / viewtube Goto Github PK

▶️ ViewTube: The open source, privacy-conscious way to enjoy your favorite YouTube content. Docs: https://viewtube.wiki, Status: https://uptime.viewtube.io

Home Page: https://viewtube.io

License: GNU Affero General Public License v3.0

JavaScript 0.45% Vue 16.36% CSS 0.02% Dockerfile 0.06% TypeScript 82.98% SCSS 0.13%

viewtube youtube youtube-player docker subscriptions video streaming vuejs typescript nuxt

viewtube's Introduction

ViewTube

ViewTube is an alternative YouTube frontend that lets you watch, search and discover YouTube videos without ads or tracking. It's built to be mobile and desktop friendly, with dark and light themes, and a touch-friendly video player with gestures. You can create an account separately from YouTube, read comments, watch playlists, subscribe to channels and receive push notifications for new uploads.
It's built using Nuxt and Nest.

Note

You can find the documentation at viewtube.wiki Check uptime.m-o.dev/status for updates and downtime status.

Features

Watch videos without ads or tracking
Built from the ground up to be mobile and desktop friendly
Dark and light themes
Touch friendly video player with gestures
Supports loop, speed, autoplay and volume
Create an account separately from Youtube
Read comments
Search for videos
Watch playlists
Subscribe to channels and see their latest uploads
Receive push notifications for subscribed channels
Integrated SponsorBlock support

Where does ViewTube get the data from?

ViewTube does not use the official Youtube API. It instead scrapes the data from the website using a combination of custom built tools and the following open source libraries.

Screenshots

Homepage

Video

Channel

Host it yourself

A comprehensive installation guide is available in the wiki

Development setup

Check out the wiki for a guide on how to set up the development environment.

Contributors

Thanks goes to these wonderful people

emoji reference

_cyacedev 💻 📖	_Vendrix 💻	_Mennaruuk 📖	_Missu 📖	_beardeddude 💻	_{Matt Fellenz} 💻	_Misir 💻
_{Alvan Rahimli} 💻	_{Dominik Szymański} 💻	_{Quentin Franchi} 💻	_frozenduck 💻

viewtube's People

Contributors

Stargazers

Watchers

Forkers

8secz-johndpope tempacc-acc ckvendrix cyacedev czadikem alefvanoon pepsimans fossabot bastibond yiapps trendingtechnology jingood2 acupofjose tyler6974 zuxriddinkamalov alpody oleglr baiboch ehill1245 lepyoshka alexrogalskiy rachaelsmith1 jrcribb lapnd beardeddude la-li-lu-le-lo tosunkaya bep40tv gypsywizrd habataku bob21424 metastem mcflat 9x3l6 pyton4ik dnh1111 jay2drip mryeet2 tevfiksirin summyd elektracodes namakotoduncan dw5 addendumexpired mattfbacon disneyaznews sep21-2009 dodurh bossman79 fuknoodles danilo012 themisir alvanrahimli vaginessa fuzmik chonsser cosmicproxy danielroe devdevdany nargacu83 frozenduck dabombusa

viewtube's Issues

Invidious Instances Not Being Fetched

Describe the bug
For some reason, ViewTube isn't fetching Invidious instances.

To Reproduce

Visit https://viewtube.io
Click on Profile icon
Click on instances
Check for any Invidious instances

Expected behavior
Invidious instances should appear.

Screenshot

Desktop (please complete the following information):

OS: Windows 10
Browser: Firefox
Version: 84.0.2

Additional context
This looks better than YouTube imho.

Captions support for videoplayer

description

Display captions in videoplayer

acceptance criterias

Add menu to select language, if available
Display captions on top of video
Sync captions with video playback progress

Miniplayer doesnt Work

description

The miniplayer, which gets activated when moving away from a playing video, doesnt work.
See: Miniplayer.vue component

acceptance criterias

Miniplayer gets displayed
???

Add sidebar

description

a sidebar for page-navigation

acceptance criterias

Retractable Sidebar
Buttons navigate to the clicked site
Mobile has a Dropdown Menue

Selected invidious instance not used

description

If you select an instance through the instance selector window, your preference is saved. But when making a call to the api, this preference gets ignored

acceptance criterias

Correctly call api client-side
Find a way to communicate to server which api to use

Add a showcase page

description

Add a showcase page for viewtube that would get more exposure and offer a user-friendly explanation of project.
Use for example github pages, or on the viewtube homepage.

acceptance criterias

Plan showcase page
Tbd

Cleanup Code

description

The current code needs cleaning.

acceptance criterias

Fix all issues analysed in Codacy
Remove parts of code that are not needed anymore
Make pages unavailable to anonymous users that require authentication ( e.g. subscriptions)
Check if API and UI follows any and all eslint rules

Possibility to change Username

description

I would love a possibility to change my username

Videoplayer quality selection

description

Allow user to change the quality of the video.

acceptance criterias

Add player menu for video quality
Display all available resolutions
Allow changing of quality
Dynamically change quality while video is playing

New search experience

description

Create an api for searching. Implement a new search frontend.

acceptance criterias

Search API
Implement API in frontend
Working filters
Url parameters

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

⬆️ Update typescript-eslint monorepo to v7.7.1 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
⬆️ Update dependency joi to v17.13.0
⬆️ Update dependency undici to v6.14.1
🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

docker-compose

docker-compose.dev.yml

docker-compose.yml

dockerfile

Dockerfile

node 20-bookworm

node 20-bookworm-slim

github-actions

.github/workflows/build-workflow.yml

actions/checkout v4

pnpm/action-setup v2

docker/setup-qemu-action v3

docker/setup-buildx-action v3

docker/login-action v3

docker/metadata-action v5

docker/build-push-action v5

ubuntu 22.04

.github/workflows/create-release-workflow.yml

actions/checkout v4

ubuntu 22.04

.github/workflows/pr-workflow.yml

actions/checkout v4

actions/setup-node v4

pnpm/action-setup v2

actions/cache v4

actions/checkout v4

actions/setup-node v4

pnpm/action-setup v2

actions/upload-artifact v4

ubuntu 22.04

ubuntu 22.04

.github/workflows/test-workflow.yml

actions/checkout v4

actions/setup-node v4

pnpm/action-setup v2

actions/upload-artifact v4

ubuntu 22.04

npm

client/package.json

@iconify-json/mdi 1.1.66

@nuxt/eslint-config 0.3.7

@pinia-plugin-persistedstate/nuxt 1.2.0

@pinia/nuxt 0.5.1

@types/humanize-duration 3.27.4

@types/node 20.12.7

@types/papaparse 5.3.14

@types/qrcode 1.5.5

@types/ua-parser-js 0.7.39

@typescript-eslint/eslint-plugin 7.7.0

@typescript-eslint/parser 7.7.0

@unocss/nuxt 0.59.3

@unocss/preset-icons 0.59.3

@vueuse/core 10.9.0

@vueuse/nuxt 10.9.0

consola 3.2.3

cross-env 7.0.3

dashjs 4.7.4

dayjs 1.11.10

destr 2.0.3

eslint 8.57.0

eslint-config-prettier 9.1.0

eslint-plugin-nuxt 4.0.0

eslint-plugin-vue 9.25.0

hls.js 1.5.8

human-number 2.0.4

humanize-duration 3.32.0

js-sha256 0.11.0

keen-slider 6.8.6

modern-js-ripple 1.1.3

nuxi 3.11.1

nuxt 3.11.2

papaparse 5.4.1

pinia 2.1.7

qrcode 1.5.3

sass 1.75.0

swiper 11.1.1

tippy.js 6.3.7

typescript 5.4.5

ua-parser-js 1.0.37

vue 3.4.22

vue-datepicker-next 1.0.3

vue-tsc 1.8.27

x2js 3.4.4

ytpl 2.3.0

node >=20.11.0

pnpm >=8.15.0

package.json

cross-env 7.0.3

prettier 3.2.5

typescript 5.4.5

node >=20.11.0

pnpm >=8.15.0

server/package.json

@fastify/cookie 9.3.1

@fastify/helmet 11.1.1

@fastify/multipart 8.2.0

@fastify/static 7.0.3

@fastify/swagger 8.14.0

@freetube/yt-comment-scraper 6.2.0

@nestjs/bull 10.1.1

@nestjs/cache-manager 2.2.2

@nestjs/common 10.3.7

@nestjs/config 3.2.2

@nestjs/core 10.3.7

@nestjs/jwt 10.2.0

@nestjs/mongoose 10.0.6

@nestjs/platform-fastify 10.3.7

@nestjs/schedule 4.0.2

@nestjs/swagger 7.3.1

archiver 7.0.1

bcryptjs 2.4.3

bull 4.12.2

cache-manager 5.5.1

cache-manager-redis-yet 5.0.0

class-transformer 0.5.1

class-validator 0.14

cookie-parser 1.4.6

dayjs 1.11.10

destr 2.0.3

fast-xml-parser 4.3.6

fastify 4.26.2

fetch-socks 1.3.0

https-proxy-agent 7.0.4

humanize-duration 3.32.0

ioredis 5.3.2

joi 17.12.3

mini-svg-data-uri 1.4.4

mongoose 8.3.1

nest-winston 1.9.4

reflect-metadata 0.2.2

rxjs 7.8.1

sharp 0.33.3

svg-captcha 1.4.0

tslib 2.6.2

undici 6.13.0

web-push 3.6.7

winston 3.13.0

winston-daily-rotate-file 5.0.0

xml-js 1.6.11

youtubei.js 9.3.0

ytpl 2.3.0

@nestjs/cli 10.3.2

@nestjs/websockets 10.3.7

@types/archiver 6.0.2

@types/bcryptjs 2.4.6

@types/cookie-parser 1.4.7

@types/eslint 8.56.9

@types/humanize-duration 3.27.4

@types/mime-types 2.1.4

@types/multer 1.4.11

@types/node 20.12.7

@types/redis-mock 0.17.3

@types/web-push 3.6.3

@types/webpack-node-externals 3.0.4

@types/xml2json 0.11.6

@typescript-eslint/eslint-plugin 7.7.0

@typescript-eslint/parser 7.7.0

cross-env 7.0.3

eslint 8.57.0

eslint-config-prettier 9.1.0

hex-rgb 5.0.0

openapi-typescript 6.7.5

redis 4.6.13

rimraf 5.0.5

run-script-webpack-plugin 0.2.0

ts-loader 9.5.1

typescript 5.4.5

webpack 5.91.0

webpack-node-externals 3.0.0

node >=20.11.0

pnpm >=8.15.0

shared/package.json

typescript 5.4.5

Check this box to trigger a request for Renovate to run again on this repository

Video player high quality support

This issue depends on #79.

description

Enable playback of higher video quality. At the moment, the maximum is 720p.
The problem is, Youtube returns higher quality streams with split audio and video.

There are several possible ways of achieving this:

Sync playback on client side (Not practical, since two sources have to be streamed at once, which causes high network usage and the playback isn't very smooth. Browsers don't seem to like multiple media streams at once.)
Reencode the two streams on the server and return a combined stream (Extremely resource intensive. Also, fluent-ffmpeg doesn't support two input streams.)
Proxy the MPEG-DASH stream from Youtube, and do the playback on the client with the dash.js library (This is the way invidious does it)

acceptance criterias

Find a viable method of high quality streaming
Implement server side
Implement client side
Add selectable quality entries to video player settings

Localization for the project

description

Enable all Strings to be translated with some third-party Tool (Research needed)

Possible tools:

acceptance criterias

Do research
tbd

Custom Feed

description

Allow creation of custom subscription feeds.
Similar to reddit feeds.

acceptance criterias

Page for custom feeds (see Figma)
Page added to sidebar
you can create feeds (and add subscriptions)
you can edit your feeds (add and remove subscriptions)
you can delete your feeds
you can swap between your feeds
feeds can be sorted
feeds can be filtered

Code Coverage / Unit Tests

description

Introduce an automated system to run different kinds of tests.
Can also run on pull requests.

acceptance criterias

Automated unit tests
Automated e2e api tests
Automated e2e client tests

Health checks for invidious instances

description

Add health checks of some kind for invidious instances.
Be able to choose the right instance more easily.

acceptance criterias

Opt. Create api for healthchecks, or use existing one
Display a symbol or indication of some kind in the instances menu
Rank instances by health

Errors should be indicated in the interface with the option to retry

Describe the bug
Currently if a request fails then it doesn't inform the person what has happened in any way, leaving them to wonder if it is still loading.

Expected behavior
If a request fails then there should be a notice on screen saying so, including the error message provided by the server.
Ideally there would also be a button to retry the last request, which the person can use if they suspect that the error is temporary.

SubIssue: Migrate Store to TypeScript

description

Nuxt Store fully migrated to TypeScript

acceptance criterias

Store is fully migrated
No issues from deepscan

ViewTube unresponsive when subscriptions are being fetched

Every time the subscriptions are fetched (currently every half hour), the instance gets unresponsive and the website responds with a timeout.

Steps to reproduce the behavior:

Visit ViewTube at x:00 or x:30 o clock

Use a background process to fetch and parse subscriptions
Limit resources of this process, so it doesn't use 100% CPU

Add a Theme Editor

description

Add a Menu to manage all themes, cloning the default ones and editing them.

acceptance criterias

Seperate Themes from Settings
Add Buttons in User-Menu
Make Default Themes uneditable
Implement Cloning, Editing and Deletion of Custom Themes
Preview Changes in Demo Window
Opt. Share Custom Theme

Support invidious subscription opml files

description

Currently only youtube subscription imports are supported. Add support for invidious imports.

acceptance criterias

Allow invidious imports of normal opml
Allow invidious imports of opml for NewPipe & FreeTube
Better error handling
Refresh subscription page after import

Channel API

description

Create an API for /channels

acceptance criterias

Create api
Document endpoint
Implement into client

Meta tags on all pages

description

meta tags, like og:... and title are incorrectly configured on some pages

acceptance criterias

configured correctly

invidio.us is now deprecated, invidious.io is the new domain.

I want to mention that "invidio.us is now deprecated, invidious.io is the new domain."

"The invidious-redirect website ( invidio.us ) is now https://redirect.invidious.io/

The instance API ( instances.invidio.us ) is now https://api.invidious.io/

The uptimerobot page ( uptime.invidio.us ) is now https://uptime.invidious.io/"

Originally posted by @Mennaruuk in #301 (comment)

Migrate to TypeScript

description

Due to the new addition of TypeScript to the client-side, it would be best to start migrate all current code to typescript if applicable.

acceptance criterias

Subissues

~~#129 Store Migration~~ ✅

[Feature Request] prefers-color-scheme

Description

Hello! I was wondering if prefers-color-scheme could be implemented in ViewTube, even if as an opt in. If enabled, ViewTube would check for system theme and switch to either light or dark mode. GitHub has something similar to this, and DuckDuckGo uses prefers-color-scheme. Thank you!

Login service

Allow page browsing on subscriptions feed.

description

Currently, the subscription feed only allow you to have access to the last 30 videos of your subscriptions. In contrary to invidious instances, which allow to browser older pages.

acceptance criterias

Add pages navigation
Opt. Allow to input a specific page to go to.

Collaboration

I basically got a request to collaborate with you (I think my ping didn't wok)

Could you see TeamPiped/Piped#102?

Allow for managing all subscribed channel

description

As seen on this extremely long picture. Viewtube only show an handful of subscribed channels, while invidious instances allow to show all of the subscribed channels at once.

acceptance criterias

Either show all subscribed channels at once
Opt. Or, display them, in a page like form, for a better performance on larger subscriptions lists.

Custom playlist support

description

Support read-only youtube playlists and editable own playlists.

acceptance criterias

You can create a playlist
You can add videos to a playlist
You can remove videos from a playlist
You can import a playlist from youtube
Create a playlist page
Add navigation to playlist page to sidebar

Detect chapters from description or comment

description

Youtube detects video chapters in the description. ViewTube could do this the same way.

acceptance criterias

Parse chapters in description
Show chapters in video player
Skip buttons, gestures
Possibly also allow selecting a comment for chapters

Livestreams just play for a few seconds

Describe the bug
Any livestream plays (audio only) for just a few seconds before it pauses. When attempting to play again, it repeats the same audio and cuts off, and this keeps going on and on.

To Reproduce
Steps to reproduce the behavior:

Go to https://viewtube.io/watch?v=Jzg_kEotb4Q
Play video
Wait for it to pause
Play it again

Expected behavior
Video and audio should play okay.

Screenshots

livestream.mp4

Desktop (please complete the following information):

OS: Manjaro
Browser: Firefox
Version: 85.0

Additional context
Thanks for implementing chapters. It blew my mind when I saw it!

Thumbnails when seeking

Description

YouTube and Invidious both show thumbnails as the user seeks through the video. It'd bring ViewTube one step forward to have thumbnails when sliding through the video's time!

thumbnails.mp4

Meta Tags on all pages

Describe the bug
Meta Tags are missing on some of the pages, for example og:... and <title>

Viewtube doesn´t support ¨big¨ subscriptions lists.

Describe the bug
A clear and concise description of what the bug is.
After trying to import a >800 channels list in my subscriptions, it doesn’t import them correctly, despite parsing them correctly after uploading the .json file.
To Reproduce
Steps to reproduce the behavior:

Go into your account settings.
Click on 'Import subscriptions'
Append your large invidious OPML subscription file.
a. Notice that all the channels are correctly parsed and added.
The import notification announce us that our subscriptions have been imported. But none are present.

Expected behavior
I would have expected to see my channels subscriptions appear.

Screenshots
If applicable, add screenshots to help explain your problem.
https://files.catbox.moe/izs92h.webm

Desktop (please complete the following information):

OS: Solus (GNU/Linux operating system)
Browser : Firefox stable.
Version : 90

Additional context
If wished, I can provide the file for testing purposes.
And yeah, while I can potentially scrap a bunch of channels in this list, I do watch the content of most of them.

Videoplayer progressbar scrubbing gets stuck

description

When clicking and holding on the progressbar and moving the mouse outside of the browser window, then letting go, the progressbar gets stuck to the cursor and can only be released with a click.

acceptance criterias

Progressbar doesnt stick to Mouse

Sponsorblock support

description

Add support for the sponsorblock api, to skip sponsored segments in videos.
https://github.com/ajayyy/SponsorBlock/wiki/API-Docs

acceptance criterias

Get sponsored segments from the api
Display and skip segments
Settings for which types of segments to skip
Possibly add an editor to submit sponsored segments

Disable Scroll in Index when popup open

description

When a popup is open, the window in the background can still be scrolled. This is especially a problem on mobile, where the menu glitches when scrolling.

acceptance criterias

Add a custom directive / other implementation to disable window scroll temporarily

Theme color not consistently applied

description

The theme-colors aren't applied properly

location:

ViewTube-Logo: Top-Left

acceptance criterias

Logo has proper colors

Channel image unavailable

description

Channel image unavailable in search, placeholder is shown

acceptance criterias

Show channel image

Videos unplayable on iOS regardless of instance

Describe the bug
Videos are stuck loading in iOS. This happens regardless of what instance I choose.

To Reproduce
Steps to reproduce the behavior:

Go to viewtube.io on an iPhone running iOS 14
Choose a currently working instance
Try to play any video

Expected behavior
Videos should play on iOS. I tried seeing any console errors using Firefox's Responsive Design mode (where I can simulate an iPhone), but I couldn't reproduce it there.

Screenshots

Fullsizerender-1.mp4

Smartphone (please complete the following information):

Device: iPhone X
OS: 14.4
Browser: Safari

Additional context
Thanks for maintaining ViewTube. I actually made all my YouTube videos redirect to ViewTube using Privacy Redirect, and I couldn't be happier.

Begin using a dedicated changelog

description

Due to the development now being released as versions, it would make sense to use a changelog with a specific format.

acceptance criterias

Changelog for next Release added
Opt. previous releases also appended

resources

keepachangelog.com has some very useful information on how to format a changelog

Tabbing in View lets you select unsubscribe button altough its not visible

description

On the Videoplayer-page its possible to select the unsubscribe-button with tabbing.

solution: use v-if

acceptance criterias

Unsubscribe button is not selectable using tab

Chrome autofill makes input field white

description

When autofilling credentials in the login or register fields in chrome, the input field background gets colored white.

Solution (by @KillTrot):

acceptance criterias

Add solution-code to base-component

Increase Performance

description

This issue holds any discussion related to possible performance increases

To-Do's

Research tools to check for performance problems
Possibility to decrease file size (for docker and transmit to client)
Split routes into webpack chunks
Don't include devDependencies in docker image
Switch to faster proxy

Layout broken on iOS safari

Currently, the layout of some pages is broken in ios safari.

Originally posted by @Mennaruuk in #294 (comment)

I share your feelings about the appearance. I think Invidious looks too simple, and your take on this with ViewTube is awesome. I love the look of VT!

A couple of things I noticed on the dev page:

This is how the Settings page currently looks like on my smartphone:

Also the About page:
The text to the right of the checkboxes for instance selection creates excessive space where I have to swipe right to see everything. Also, there is no button to return to homepage after choosing an instance (beside refreshing). Clicking the browser’s back button returned me to the site I was on before ViewTube:

Thank you for this great site! 🙏

invidious feature parity

Feature	Invidious	ViewTube
Audio-only mode	X
No need to keep window open on mobile	X	X
Free software (AGPLv3 licensed)	X	X
No ads	X	X
No need to create a Google account to save subscriptions	X	X
Lightweight (homepage is ~4 KB compressed)	X	15.3 KB compressed
Tools for managing subscriptions:	X	X
Only show unseen videos	X
Only show latest (or latest unseen) video from each channel	X
Delivers notifications from all subscribed channels	X	X
Automatically redirect homepage to feed	X	X
Import subscriptions from YouTube	X	X
Dark/Light mode	X	X
Embed support	X	X
Set default player options (speed, quality, autoplay, loop)	X	X
Does not require JS to play videos	X	X
Support for Reddit comments in place of YT comments	X
Import/Export subscriptions, watch history, preferences	X
Does not use any of the official YouTube APIs	X	X
Developer API	X	X
Per-Channel RSS Feed	X

N: Not intended

No videos or searches are showing

Describe the bug
Neither videos nor searches show up.

To Reproduce
Steps to reproduce the behavior:

Go to viewtube.io
Check for any videos showing up under Popular videos
Search for PewDiePie
Check if any videos show up as results for the search

Expected behavior
Trending videos should appear under Popular videos. Also, searching should work, and results should appear in response to searching.

Screenshots

Desktop (please complete the following information):

OS: Windows 10
Browser: Firefox
Version: 84.0.2

Additional context
Don't know if design is material, but whatever it is, it looks really elegant!