Add a channel page and fix some things.

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",

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"
     },

src/App.vue

@@ -15,7 +15,7 @@
     </div>
 </nav>
 
-<div class="uk-container uk-light" style="background:#0b0e0f">
+<div class="uk-container uk-container-expand uk-light" style="background:#0b0e0f">
     <router-view />
 </div>
 </template>
@@ -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;
+}
 </style>

src/Constants.js

@@ -1,3 +1,3 @@
 export default {
-    BASE_URL: '',
+    BASE_URL: 'https://pipedapi.kavin.rocks',
 }

src/components/Channel.vue

@@ -0,0 +1,62 @@
+<template>
+<div v-if="channel">
+    <h1 class="uk-text-center"><img v-bind:src="channel.avatarUrl">{{ channel.name }}</h1>
+    <img v-bind:src="channel.bannerUrl" style="width: 100%">
+    <p v-html="this.channel.description.replaceAll('\n', '<br>')"></p>
+    <div class="" style="width: 100%" uk-grid="parallax: 0">
+        <div style="width: 260px" v-bind:key="item.url" v-for="item in this.channel.relatedStreams">
+            <router-link class="uk-link-muted" v-bind:to="item.url || '/'">
+                <img style="width: 100%" v-bind:src="item.thumbnail">
+                <p>{{ item.title }}</p>
+            </router-link>
+            {{ timeFormat(item.duration) }}
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import Constants from "@/Constants.js";
+
+export default {
+    data() {
+        return {
+            channel: null,
+        }
+    },
+    mounted() {
+        this.getChannelData()
+    },
+    methods: {
+        async fetchChannel() {
+            return await (
+                await fetch(Constants.BASE_URL + "/channels/" + this.$route.params.channelId)
+            ).json();
+        },
+        async getChannelData() {
+            this.fetchChannel().then(data => this.channel = data)
+        },
+        timeFormat(duration) {
+
+            var pad = function (num, size) {
+                return ('000' + num).slice(size * -1);
+            }
+
+            var time = parseFloat(duration).toFixed(3),
+                hours = Math.floor(time / 60 / 60),
+                minutes = Math.floor(time / 60) % 60,
+                seconds = Math.floor(time - minutes * 60);
+
+            var str = "";
+
+            if (hours > 0)
+                str += pad(hours, 2) + ":"
+
+            str += pad(minutes, 2) + ':' + pad(seconds, 2)
+
+            return str;
+
+        }
+    }
+}
+</script>

src/components/TrendingPage.vue

@@ -2,7 +2,7 @@
 <h1 class="uk-text-bold uk-text-center">Trending</h1>
 
 <div class="" style="width: 100%" uk-grid="parallax: 0">
-    <div class="uk-tile-default" style="width: 350px; background: #0b0e0f" v-bind:key="video.url" v-for="video in videos">
+    <div class="uk-tile-default" style="width: 300px; background: #0b0e0f" v-bind:key="video.url" v-for="video in videos">
         <div class="uk-card uk-card-default uk-card-body uk-grid-match uk-text-secondary" style="background: #0b0e0f">
             <router-link class="uk-text-emphasis" v-bind:to="video.url || '/'">
                 <p>{{ video.title }}</p>

src/components/WatchVideo.vue

@@ -1,39 +1,41 @@
 <template>
-<h1 class="uk-text-bold">{{ video.title }}</h1>
+<div class="uk-container uk-container-xlarge">
-<video controls ref="player" class="video-js vjs-16-9"></video>
+    <h1 class="uk-text-bold">{{ video.title }}</h1>
+    <video controls ref="player" class="video-js preview-player-dimensions "></video>
 
-<div>
     <img :src="video.uploaderAvatar" />
     <router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
-        <p>{{ video.uploader }}</p>
+        <a>{{ video.uploader }}</a>
     </router-link>
-</div>
 
-<p v-if="sponsors && sponsors.segments">Sponsors found in Video: {{ sponsors.segments.length }}</p>
+    <p class="uk-dark">
-
+        <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
-<p class="uk-dark">
+        {{ video.likes }}
-    <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
+        <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-    {{ video.likes }}
+        {{ video.dislikes }}
-    <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-    {{ video.dislikes }}
-</p>
-<p>
-    <font-awesome-icon icon="eye"></font-awesome-icon> {{ video.views }} views
-</p>
-<p class="uk-light" v-html="video.description"></p>
-
-<div class="uk-tile-default uk-text-secondary" style="background: #0b0e0f; width: 300px" v-bind:key="related.url" v-for="related in video.relatedStreams">
-    <router-link class="uk-link-muted" v-bind:to="related.url">
-        <p class="uk-text-emphasis">{{ related.title }}</p>
-        <img style="width: 100%" v-bind:src="related.thumbnail" />
-    </router-link>
-    <p>
-        <router-link class="uk-link-muted" v-bind:to="related.uploaderUrl || '/'">
-            <p>{{ related.uploaderName }}</p>
-        </router-link>
-        <font-awesome-icon icon="eye"></font-awesome-icon>
-        {{ related.views }} views
     </p>
+    <p>
+        <font-awesome-icon icon="eye"></font-awesome-icon> {{ video.views }} views
+    </p>
+    <p class="uk-light" v-html="video.description"></p>
+    <a v-if="sponsors && sponsors.segments">Sponsors Segments: {{ sponsors.segments.length }}</a>
+
+    <hr>
+
+    <div class="uk-tile-default uk-text-secondary" style="background: #0b0e0f; width: 300px" v-bind:key="related.url" v-for="related in video.relatedStreams">
+        <router-link class="uk-link-muted" v-bind:to="related.url">
+            <p class="uk-text-emphasis">{{ related.title }}</p>
+            <img style="width: 100%" v-bind:src="related.thumbnail" />
+        </router-link>
+        <p>
+            <router-link class="uk-link-muted" v-bind:to="related.uploaderUrl || '/'">
+                <p>{{ related.uploaderName }}</p>
+            </router-link>
+            <font-awesome-icon icon="eye"></font-awesome-icon>
+            {{ related.views }} views
+        </p>
+    </div>
+
 </div>
 </template>
 
@@ -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: {
+                        responsive: false,
-                            ttml: {}
+                        aspectRatio: '16:9'
-                        },
-                        nativeTextTracks: false,
                     };
 
                     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)
+                    if (!noPrevPlayer)
-                    //     this.player.remoteTextTracks().map(track => this.player.removeRemoteTextTrack(track));
+                        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
+                            type: "captions/captions.vtt"
-                        }, false);
+                        }, false).mode = "showing"
                     })
 
                     //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12

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";
+require("uikit/src/less/uikit.less")
-import "uikit/dist/js/uikit.min.js";
+require("uikit/dist/js/uikit.min.js")
 
 import router from '@/router/router'
 import App from './App.vue'

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({