From 98640e6d9283666c35165b7c3f2b5a72710c7dea Mon Sep 17 00:00:00 2001 From: FireMasterK <20838718+FireMasterK@users.noreply.github.com> Date: Fri, 13 Nov 2020 02:12:02 +0530 Subject: [PATCH] Add a channel page and fix some things. --- package-lock.json | 12 ----- package.json | 3 +- src/App.vue | 27 +++++++++- src/Constants.js | 2 +- src/components/Channel.vue | 62 +++++++++++++++++++++++ src/components/TrendingPage.vue | 2 +- src/components/WatchVideo.vue | 87 ++++++++++++++++++--------------- src/main.js | 4 +- src/router/router.js | 5 ++ 9 files changed, 145 insertions(+), 59 deletions(-) create mode 100644 src/components/Channel.vue diff --git a/package-lock.json b/package-lock.json index 69922dea..b147c3c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7842,11 +7842,6 @@ "minimist": "^1.2.5" } }, - "moment": { - "version": "2.29.1", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", - "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" - }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz", @@ -11495,13 +11490,6 @@ "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.27.tgz", "integrity": "sha512-pwtm1QocRmzJy1PWQsmFVHyeldYHHpLdeATK3FsFHVMmNpz6CROkAn8TFy2UILr8Ghgq134K8jEKNue8HWpudQ==" }, - "videojs-ttml": { - "version": "git+https://github.com/StuffNoOneCaresAbout/videojs-ttml.git#6927bafe47752cc3d92f06f18379b6134d182941", - "from": "git+https://github.com/StuffNoOneCaresAbout/videojs-ttml.git", - "requires": { - "moment": "^2.17.0" - } - }, "videojs-vtt.js": { "version": "0.15.2", "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.2.tgz", diff --git a/package.json b/package.json index 99810cbb..1114d60c 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "video.js": "^7.10.2", "videojs-contrib-quality-levels": "^2.0.9", "videojs-hotkeys": "^0.2.27", - "videojs-ttml": "git+https://github.com/StuffNoOneCaresAbout/videojs-ttml.git", "vue": "^3.0.0", "vue-router": "^4.0.0-rc.2" }, @@ -52,4 +51,4 @@ "last 2 versions", "not dead" ] -} +} \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index b1809e79..ec3ebc82 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,7 +15,7 @@ -
+
@@ -34,4 +34,29 @@ export default { #app { background: #0b0e0f; } + +::-webkit-scrollbar { + background-color: #15191a; + color: #c5bcae; +} + +::-webkit-scrollbar-thumb { + background-color: #4b4f52; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #5b6469; +} + +::-webkit-scrollbar-thumb:active { + background-color: #485053; +} + +::-webkit-scrollbar-corner { + background-color: #0b0e0f; +} + +* { + scrollbar-color: #15191a #444a4e; +} diff --git a/src/Constants.js b/src/Constants.js index 4f75023b..11031946 100644 --- a/src/Constants.js +++ b/src/Constants.js @@ -1,3 +1,3 @@ export default { - BASE_URL: '', + BASE_URL: 'https://pipedapi.kavin.rocks', } \ No newline at end of file diff --git a/src/components/Channel.vue b/src/components/Channel.vue new file mode 100644 index 00000000..89f603a2 --- /dev/null +++ b/src/components/Channel.vue @@ -0,0 +1,62 @@ + + + diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue index 6536e465..a030fc2d 100644 --- a/src/components/TrendingPage.vue +++ b/src/components/TrendingPage.vue @@ -2,7 +2,7 @@

Trending

-
+

{{ video.title }}

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue index ef803d16..f748b144 100644 --- a/src/components/WatchVideo.vue +++ b/src/components/WatchVideo.vue @@ -1,39 +1,41 @@ @@ -44,7 +46,6 @@ import videojs from "video.js"; import "videojs-hotkeys"; import Constants from "@/Constants.js"; require("@silvermine/videojs-quality-selector")(videojs); -//import "videojs-ttml/dist/videojs-ttml.min.js"; export default { name: "App", @@ -102,14 +103,12 @@ export default { "progressControl", "volumePanel", "qualitySelector", - "subtitlesButton", + "captionsButton", "fullscreenToggle", ], }, - plugins: { - ttml: {} - }, - nativeTextTracks: false, + responsive: false, + aspectRatio: '16:9' }; const noPrevPlayer = !this.player @@ -135,6 +134,14 @@ export default { }) ); + this.video.audioStreams.map((stream) => + src.push({ + src: stream.url, + type: stream.mimeType, + label: stream.quality, + }) + ); + this.player.src(src); if (noPrevPlayer) @@ -153,16 +160,16 @@ export default { } }); - // if (!noPrevPlayer) - // this.player.remoteTextTracks().map(track => this.player.removeRemoteTextTrack(track)); + if (!noPrevPlayer) + this.player.remoteTextTracks().map(track => this.player.removeRemoteTextTrack(track)); this.video.subtitles.map(subtitle => { this.player.addRemoteTextTrack({ kind: "captions", - src: subtitle.url, + src: subtitle.url.replace("fmt=ttml", "fmt=vtt"), label: "Track", - type: subtitle.mimeType - }, false); + type: "captions/captions.vtt" + }, false).mode = "showing" }) //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12 diff --git a/src/main.js b/src/main.js index 1acb3032..ee79c11b 100644 --- a/src/main.js +++ b/src/main.js @@ -4,8 +4,8 @@ import { faThumbsUp, faThumbsDown, faEye } from '@fortawesome/free-solid-svg-ico import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faThumbsUp, faThumbsDown, faEye) -import "uikit/src/less/uikit.less"; -import "uikit/dist/js/uikit.min.js"; +require("uikit/src/less/uikit.less") +require("uikit/dist/js/uikit.min.js") import router from '@/router/router' import App from './App.vue' diff --git a/src/router/router.js b/src/router/router.js index afdba1c3..14b7e42f 100644 --- a/src/router/router.js +++ b/src/router/router.js @@ -1,6 +1,7 @@ import { createRouter, createWebHistory } from 'vue-router' import Watch from '../components/WatchVideo.vue' import Trending from '../components/TrendingPage.vue' +import Channel from '../components/Channel.vue' const routes = [{ path: '/watch', @@ -10,6 +11,10 @@ const routes = [{ path: '/', name: 'Trending', component: Trending +}, { + path: '/channel/:channelId', + name: 'Channel', + component: Channel }] const router = createRouter({