✨ New video player (#2388)

.all-contributorsrc

@@ -1,7 +1,5 @@
 {
-  "files": [
-    "README.md"
-  ],
+  "files": ["README.md"],
   "imageSize": 100,
   "commit": false,
   "contributors": [
@@ -10,73 +8,56 @@
       "name": "cyacedev",
       "avatar_url": "https://avatars0.githubusercontent.com/u/46712905?v=4",
       "profile": "https://github.com/cyacedev",
-      "contributions": [
-        "code",
-        "doc"
-      ]
+      "contributions": ["code", "doc"]
     },
     {
       "login": "ckVendrix",
       "name": "Vendrix",
       "avatar_url": "https://avatars2.githubusercontent.com/u/51775140?v=4",
       "profile": "https://github.com/ckVendrix",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "Mennaruuk",
       "name": "Mennaruuk",
       "avatar_url": "https://avatars.githubusercontent.com/u/52135169?v=4",
       "profile": "https://github.com/Mennaruuk",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "mizzunet",
       "name": "Missu",
       "avatar_url": "https://avatars.githubusercontent.com/u/10193999?v=4",
       "profile": "https://github.com/mizzunet",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "beardeddude",
       "name": "beardeddude",
       "avatar_url": "https://avatars.githubusercontent.com/u/36680638?v=4",
       "profile": "https://github.com/beardeddude",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "mattfbacon",
       "name": "Matt Fellenz",
       "avatar_url": "https://avatars.githubusercontent.com/u/58113890?v=4",
       "profile": "http://matt.felle.nz",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "themisir",
       "name": "Misir",
       "avatar_url": "https://avatars.githubusercontent.com/u/29130291?v=4",
       "profile": "http://themisir.com",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "alvanrahimli",
       "name": "Alvan Rahimli",
       "avatar_url": "https://avatars.githubusercontent.com/u/41202771?v=4",
       "profile": "https://www.rahim.li",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "chonsser",

.dockerignore

@@ -30,3 +30,5 @@ client/.output
 client/.nuxt
 server/node_modules
 server/dist
+shared/node_modules
+shared/dist

.github/workflows/build-workflow.yml

@@ -38,7 +38,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Generate build metadata

.github/workflows/pr-workflow.yml

@@ -8,7 +8,7 @@ jobs:
   pr-job:
     strategy:
       matrix:
-        command: ['build', 'test', 'lint:client', 'lint:server']
+        command: ['build', 'lint']
 
     name: ${{ matrix.command }}
     timeout-minutes: 60
@@ -26,7 +26,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Get pnpm store directory
@@ -45,6 +45,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Prepare .nuxt directory
+        run: pnpm run nuxt:prepare
+
       - name: Generate build metadata
         run: |
           pnpm build:metadata
@@ -68,7 +71,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Install e2e test dependencies

.github/workflows/test-workflow.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Install e2e test dependencies

.gitignore

@@ -33,7 +33,7 @@ sw.*
 out/
 out/*
 
-data/*
+data
 !/server/data
 output/*
 .vs/*
@@ -44,6 +44,7 @@ dump.rdb
 tests/cypress/screenshots
 tests/cypress/videos
 tests/cypress/downloads
+tests/cypress/environment/data
 
 Dockerfile.nodejs-mongodb
 .vscode/.ropeproject/
@@ -55,3 +56,4 @@ client/buildMetadata.json
 **/cache
 generated.txt
 original.txt
+screenshots

.prettierignore

@@ -12,9 +12,13 @@ client/assets/fonts
 server/data
 server/node_modules
 server/dist
+server/src/metadata.ts
 
 # Shared
 shared/node_modules
+shared/src/api.schema.ts
 
 # Tests
 tests/node_modules
+
+.all-contributorsrc

.prettierrc.json

@@ -9,5 +9,6 @@
   "endOfLine": "lf",
   "printWidth": 100,
   "vueIndentScriptAndStyle": false,
-  "quoteProps": "as-needed"
+  "quoteProps": "as-needed",
+  "plugins": ["prettier-plugin-organize-imports"]
 }

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "prettier.prettierPath": "node_modules/prettier/index.cjs",
   "typescript.tsdk": "node_modules/typescript/lib",
-  "githubPullRequests.ignoredPullRequestBranches": ["development"]
+  "githubPullRequests.ignoredPullRequestBranches": ["development"],
+  "eslint.experimental.useFlatConfig": true
 }

CHANGELOG.md

@@ -3,6 +3,12 @@
 This file is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.16.0]
+
+### Added
+
+- Brand new video player (Checkout the wiki: https://viewtube.wiki/features/videoplayer) [#2388]
+
 ## [0.15.4]
 
 ### Fixed
@@ -86,7 +92,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Breaking ⚠️
 
 - Disable clustering by default [#2377](https://github.com/ViewTube/viewtube/pull/2377)
-  - Clustering is now disabled by default. If you want to use clustering, you have to set the `VIEWTUBE_CLUSTERED` environment variable to `true`.
+  - Clustering is controlled by the `VIEWTUBE_CLUSTERED` environment variable [viewtube.wiki > advanced configuration](https://viewtube.wiki/installation/configuration#advanced-configuration).  
+    If you have disabled clustering previously, you don't need to change anything.  
+    If you want to keep clustering enabled, you need to set the `VIEWTUBE_CLUSTERED` environment variable to `true`.
 
 ### Added
 
@@ -104,6 +112,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix "window is not defined" when logged in and "Rewrite YouTube URLs" is enabled [#2469](https://github.com/ViewTube/viewtube/pull/2469)
 - Fix certain search terms not working [#2493](https://github.com/ViewTube/viewtube/pull/2493)
 
+## Removed
+
+- Remove unused VIEWTUBE_YOUTUBE_IDENTIFIER environment variable [#2388](https://github.com/ViewTube/viewtube/pull/2388)
+
 ## [0.13.1]
 
 ### Fixed
@@ -427,7 +439,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial release
 
-[unreleased]: https://github.com/viewtube/viewtube/compare/v0.15.4...development
+[unreleased]: https://github.com/viewtube/viewtube/compare/v0.16.0...development
+[0.16.0]: https://github.com/viewtube/viewtube/compare/v0.15.4...v0.16.0
 [0.15.4]: https://github.com/viewtube/viewtube/compare/v0.15.3...v0.15.4
 [0.15.3]: https://github.com/viewtube/viewtube/compare/v0.15.2...v0.15.3
 [0.15.2]: https://github.com/viewtube/viewtube/compare/v0.15.1...v0.15.2

Dockerfile

@@ -1,18 +1,17 @@
 FROM node:20-bookworm as build
 WORKDIR /home/build
 
-ENV NUXT_BUILD=true
-
-COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .npmrc ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 
 COPY server/package.json ./server/
-COPY client/package.json ./client/
 COPY shared/package.json ./shared/
+COPY client/package.json ./client/
+COPY client/scripts ./client/scripts
 COPY patches ./patches
 
-RUN npm install -g pnpm@8.15.7
+RUN npm install -g pnpm@9.1.3
 
-RUN pnpm --filter=./server --filter=./client install --frozen-lockfile
+RUN pnpm install --frozen-lockfile
 
 COPY . .
 
@@ -30,12 +29,15 @@ ENV NODE_ENV=production
 COPY --from=build /home/build/package.json ./
 COPY --from=build /home/build/client/package.json ./client/
 COPY --from=build /home/build/server/package.json ./server/
+COPY --from=build /home/build/shared/package.json ./shared/
 
 COPY --from=build /home/build/node_modules ./node_modules
 COPY --from=build /home/build/server/node_modules ./server/node_modules
 
 COPY --from=build /home/build/server/dist ./server/dist/
 
+COPY --from=build /home/build/shared/dist ./shared/dist/
+
 COPY --from=build /home/build/client/.output ./client/.output/
 
 RUN \
@@ -48,4 +50,4 @@ ENV VIEWTUBE_BASE_DIR=/home/app
 HEALTHCHECK --interval=30s --timeout=20s --start-period=60s CMD wget --no-verbose --tries=3 --spider http://localhost:8066/ || exit 1
 EXPOSE 8066
 
-CMD ["node", "/home/app/server/dist/main.cjs"]
+CMD ["node", "/home/app/server/dist/main.js"]

README.md

@@ -27,8 +27,8 @@ ViewTube is an alternative YouTube frontend that lets you watch, search and disc
 It's built using [Nuxt](https://nuxt.com/) and [Nest](https://nestjs.com/).
 
 > [!NOTE]
-> You can find the documentation at [viewtube.wiki](https://viewtube.wiki)
-Check [uptime.m-o.dev/status](https://uptime.m-o.dev/status) for updates and downtime status.  
+> You can find the documentation at [viewtube.wiki](https://viewtube.wiki).  
+> Check [uptime.m-o.dev/status](https://uptime.m-o.dev/status) for updates and downtime status.
 
 <h2 align="center">
 <sub>

client/assets/styles/global/variables.scss

@@ -3,7 +3,7 @@ $bottom-overlay-height: 60px;
 $video-seekbar-height: 20px;
 $video-seekbar-line-height: 3px;
 $video-controls-height: $video-seekbar-height - $video-seekbar-line-height;
-$video-player-gradient: linear-gradient(to bottom, #000000da, #0000);
+$video-player-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.94), transparent);
 
 $home-offset: 200px;
 
@@ -14,9 +14,15 @@ $watch-break-width: 380px;
 $header-font: 'expletus-bold', 'Open Sans', sans-serif;
 $default-font: 'noto-sans', Arial, sans-serif;
 
-$max-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-$medium-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-$low-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+$max-shadow:
+  0 14px 28px rgba(0, 0, 0, 0.25),
+  0 10px 10px rgba(0, 0, 0, 0.22);
+$medium-shadow:
+  0 3px 6px rgba(0, 0, 0, 0.16),
+  0 3px 6px rgba(0, 0, 0, 0.23);
+$low-shadow:
+  0 1px 3px rgba(0, 0, 0, 0.12),
+  0 1px 2px rgba(0, 0, 0, 0.24);
 
 $intro-easing: cubic-bezier(0.31, 0.65, 0.26, 0.97);
 $outro-easing: cubic-bezier(0.71, 0.21, 1, 0.46);