Merge remote-tracking branch 'origin/master' into toast

src/components/ChannelPage.vue

@@ -146,7 +146,7 @@ export default {
         },
         async fetchChannel() {
             const url = this.$route.path.includes("@")
-                ? this.apiUrl() + "/c/" + this.$route.params.channelId
+                ? this.apiUrl() + "/@/" + this.$route.params.channelId
                 : this.apiUrl() + "/" + this.$route.params.path + "/" + this.$route.params.channelId;
             return await this.fetchJson(url);
         },

src/components/NavBar.vue

@@ -25,7 +25,7 @@
                 @focus="onInputFocus"
                 @blur="onInputBlur"
             />
-            <span v-if="searchText" class="delete-search" @click="searchText = ''">x</span>
+            <span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
         </div>
         <!-- three vertical lines for toggling the hamburger menu on mobile -->
         <button class="md:hidden flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav">
@@ -100,7 +100,7 @@
             @focus="onInputFocus"
             @blur="onInputBlur"
         />
-        <span v-if="searchText" class="delete-search" @click="searchText = ''">x</span>
+        <span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
     </div>
     <SearchSuggestions
         v-show="(searchText || showSearchHistory) && suggestionsVisible"

src/components/PlaylistItem.vue

@@ -10,14 +10,15 @@
             </p>
         </router-link>
         <p v-if="props.item.description" v-text="props.item.description" />
+
         <router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl">
             <p>
-                <span v-text="props.item.uploader" />
+                <span v-text="props.item.uploaderName" />
                 <font-awesome-icon class="ml-1.5" v-if="props.item.uploaderVerified" icon="check" />
             </p>
         </router-link>
+        <a v-else-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />
 
-        <a v-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />
         <template v-if="props.item.videos >= 0">
             <br v-if="props.item.uploaderName" />
             <strong v-text="`${props.item.videos} ${$t('video.videos')}`" />

src/components/VideoItem.vue

@@ -1,6 +1,7 @@
 <template>
     <div v-if="showVideo">
         <router-link
+            class="focus:underline hover:underline inline-block w-full"
             :to="{
                 path: '/watch',
                 query: {
@@ -50,60 +51,29 @@
             <div>
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
-                    class="my-2 overflow-hidden flex link"
+                    class="pt-2 overflow-hidden flex link font-bold"
                     :title="item.title"
                     v-text="item.title"
                 />
             </div>
         </router-link>
 
-        <div class="float-right m-0 inline-block children:px-1">
-            <router-link
-                :to="{
-                    path: '/watch',
-                    query: {
-                        v: item.url.substr(-11),
-                        ...(playlistId && { list: playlistId }),
-                        ...(index >= 0 && { index: index + 1 }),
-                        listen: '1',
-                    },
-                }"
-                :aria-label="'Listen to ' + item.title"
-                :title="'Listen to ' + item.title"
-            >
-                <font-awesome-icon icon="headphones" />
-            </router-link>
-            <button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
-                <font-awesome-icon icon="circle-plus" />
-            </button>
-            <button
-                v-if="admin"
-                :title="$t('actions.remove_from_playlist')"
-                ref="removeButton"
-                @click="removeVideo(item.url.substr(-11))"
-            >
-                <font-awesome-icon icon="circle-minus" />
-            </button>
-            <PlaylistAddModal v-if="showModal" :video-id="item.url.substr(-11)" @close="showModal = !showModal" />
-        </div>
-
         <div class="flex">
             <router-link :to="item.uploaderUrl">
                 <img
                     v-if="item.uploaderAvatar"
                     :src="item.uploaderAvatar"
                     loading="lazy"
-                    :alt="item.uploaderName"
                     class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
                     width="68"
                     height="68"
                 />
             </router-link>
 
-            <div class="w-[calc(100%-32px-1rem)]">
+            <div class="px-2 flex-1">
                 <router-link
                     v-if="item.uploaderUrl && item.uploaderName && !hideChannel"
-                    class="link-secondary overflow-hidden block"
+                    class="link-secondary overflow-hidden block text-sm"
                     :to="item.uploaderUrl"
                     :title="item.uploaderName"
                 >
@@ -111,14 +81,44 @@
                     <font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
                 </router-link>
 
-                <strong v-if="item.views >= 0 || item.uploadedDate" class="text-sm">
+                <div v-if="item.views >= 0 || item.uploadedDate" class="text-xs font-normal text-gray-300 mt-1">
                     <span v-if="item.views >= 0">
                         <font-awesome-icon icon="eye" />
-                        <span class="pl-0.5" v-text="`${numberFormat(item.views)} •`" />
+                        <span class="pl-1" v-text="`${numberFormat(item.views)} •`" />
                     </span>
                     <span v-if="item.uploaded > 0" class="pl-0.5" v-text="timeAgo(item.uploaded)" />
                     <span v-else-if="item.uploadedDate" class="pl-0.5" v-text="item.uploadedDate" />
-                </strong>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-2.5">
+                <router-link
+                    :to="{
+                        path: '/watch',
+                        query: {
+                            v: item.url.substr(-11),
+                            ...(playlistId && { list: playlistId }),
+                            ...(index >= 0 && { index: index + 1 }),
+                            listen: '1',
+                        },
+                    }"
+                    :aria-label="'Listen to ' + item.title"
+                    :title="'Listen to ' + item.title"
+                >
+                    <font-awesome-icon icon="headphones" />
+                </router-link>
+                <button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
+                    <font-awesome-icon icon="circle-plus" />
+                </button>
+                <button
+                    v-if="admin"
+                    :title="$t('actions.remove_from_playlist')"
+                    ref="removeButton"
+                    @click="removeVideo(item.url.substr(-11))"
+                >
+                    <font-awesome-icon icon="circle-minus" />
+                </button>
+                <PlaylistAddModal v-if="showModal" :video-id="item.url.substr(-11)" @close="showModal = !showModal" />
             </div>
         </div>
     </div>
@@ -126,7 +126,7 @@
 
 <style>
 .shorts-img {
-    @apply max-h-[17.5vh] w-full object-contain;
+    @apply w-full object-contain;
 }
 </style>
 

src/components/VideoPlayer.vue

@@ -6,6 +6,7 @@
         :class="{ 'player-container': !isEmbed }"
     >
         <video ref="videoEl" class="w-full" data-shaka-player :autoplay="shouldAutoPlay" :loop="selectedAutoLoop" />
+        <canvas height="130" width="230" id="preview" />
         <button
             v-if="inSegment"
             class="skip-segment-button"
@@ -55,6 +56,7 @@ export default {
             initialSeekComplete: false,
             destroying: false,
             inSegment: false,
+            isHoveringTimebar: false,
         };
     },
     computed: {
@@ -498,6 +500,8 @@ export default {
 
             const player = this.$ui.getControls().getPlayer();
 
+            this.setupSeekbarPreview();
+
             this.$player = player;
 
             const disableVideo = this.getPreferenceBoolean("listen", false) && !this.video.livestream;
@@ -671,6 +675,81 @@ export default {
                 });
             }
         },
+        setupSeekbarPreview() {
+            if (!this.video.previewFrames) return;
+            let seekBar = document.querySelector(".shaka-seek-bar");
+            // load the thumbnail preview when the user moves over the seekbar
+            seekBar.addEventListener("mousemove", e => {
+                this.isHoveringTimebar = true;
+                const position = (e.offsetX / e.target.offsetWidth) * this.video.duration;
+                this.showSeekbarPreview(position * 1000);
+            });
+            // hide the preview when the user stops hovering the seekbar
+            seekBar.addEventListener("mouseout", () => {
+                this.isHoveringTimebar = false;
+                let canvas = document.querySelector("#preview");
+                canvas.style.display = "none";
+            });
+        },
+        async showSeekbarPreview(position) {
+            let frame = this.getFrame(position);
+            let originalImage = await this.loadImage(frame.url);
+            if (!this.isHoveringTimebar) return;
+
+            let seekBar = document.querySelector(".shaka-seek-bar");
+            let canvas = document.querySelector("#preview");
+            let ctx = canvas.getContext("2d");
+
+            // get the new sizes for the image to be drawn into the canvas
+            const originalWidth = originalImage.naturalWidth;
+            const originalHeight = originalImage.naturalHeight;
+            const offsetX = originalWidth * (frame.positionX / frame.framesPerPageX);
+            const offsetY = originalHeight * (frame.positionY / frame.framesPerPageY);
+            const newWidth = originalWidth / frame.framesPerPageX;
+            const newHeight = originalHeight / frame.framesPerPageY;
+
+            // draw the thumbnail preview into the canvas by cropping only the relevant part
+            ctx.drawImage(originalImage, offsetX, offsetY, newWidth, newHeight, 0, 0, canvas.width, canvas.height);
+
+            // calculate the thumbnail preview offset and display it
+            const seekbarPadding = 2; // percentage of seekbar padding
+            const centerOffset = position / this.video.duration / 10;
+            const left = centerOffset - ((0.5 * canvas.width) / seekBar.clientWidth) * 100;
+            const maxLeft = ((seekBar.clientWidth - canvas.clientWidth) / seekBar.clientWidth) * 100 - seekbarPadding;
+            canvas.style.left = `max(${seekbarPadding}%, min(${left}%, ${maxLeft}%))`;
+            canvas.style.display = "block";
+        },
+        // ineffective algorithm to find the thumbnail corresponding to the currently hovered position in the video
+        getFrame(position) {
+            let startPosition = 0;
+            let framePage = this.video.previewFrames.at(-1);
+            for (let i = 0; i < framePage.urls.length; i++) {
+                for (let positionY = 0; positionY < framePage.framesPerPageY; positionY++) {
+                    for (let positionX = 0; positionX < framePage.framesPerPageX; positionX++) {
+                        const endPosition = startPosition + framePage.durationPerFrame;
+                        if (position >= startPosition && position <= endPosition) {
+                            return {
+                                url: framePage.urls[i],
+                                positionX: positionX,
+                                positionY: positionY,
+                                framesPerPageX: framePage.framesPerPageX,
+                                framesPerPageY: framePage.framesPerPageY,
+                            };
+                        }
+                        startPosition = endPosition;
+                    }
+                }
+            }
+            return null;
+        },
+        // creates a new image from an URL
+        loadImage(url) {
+            return new Promise(r => {
+                let i = new Image();
+                i.onload = () => r(i);
+                i.src = url;
+            });
+        },
         destroy(hotkeys) {
             if (this.$ui && !document.pictureInPictureElement) {
                 this.$ui.destroy();
@@ -750,4 +829,12 @@ export default {
     font-size: 1.6em !important;
     line-height: inherit !important;
 }
+
+#preview {
+    position: absolute;
+    z-index: 2000;
+    bottom: 0;
+    margin-bottom: 4.5%;
+    border-radius: 0.3rem;
+}
 </style>