merge latest master

src/components/ChaptersBar.vue

@@ -52,8 +52,6 @@
 </style>
 
 <script setup>
-import { defineProps, defineEmits } from "vue";
-
 const props = defineProps({
     chapters: Object,
     mobileLayout: {

src/components/CommentItem.vue

@@ -6,8 +6,13 @@
             <div class="comment-header">
                 <div v-if="comment.pinned" class="comment-pinned">
                     <font-awesome-icon icon="thumbtack" />
-                    <span class="ml-1.5" v-t="'comment.pinned_by'" />
-                    <span v-text="uploader" />
+                    <span
+                        class="ml-1.5"
+                        v-t="{
+                            path: 'comment.pinned_by',
+                            args: { author: uploader },
+                        }"
+                    />
                 </div>
 
                 <div class="comment-author mt-1 flex">
@@ -22,7 +27,7 @@
             <div class="whitespace-pre-wrap" v-html="urlify(comment.commentText)" />
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div @click="loadReplies" class="cursor-pointer">
-                    <a v-t="'actions.show_replies'" />
+                    <a v-text="`${$t('actions.reply_count', comment.replyCount)}`" />
                     <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
                 </div>
             </template>

src/components/HistoryPage.vue

@@ -39,7 +39,7 @@ export default {
             if (window.db) {
                 var tx = window.db.transaction("watch_history", "readonly");
                 var store = tx.objectStore("watch_history");
-                const cursorRequest = store.openCursor();
+                const cursorRequest = store.index("watchedAt").openCursor(null, "prev");
                 cursorRequest.onsuccess = e => {
                     const cursor = e.target.result;
                     if (cursor) {
@@ -53,7 +53,6 @@ export default {
                             thumbnail: video.thumbnail,
                             watchedAt: video.watchedAt,
                         });
-                        this.videos.sort((a, b) => b.watchedAt - a.watchedAt); // TODO: Optimize
                         if (this.videos.length < 1000) cursor.continue();
                     }
                 };

src/components/PlaylistsPage.vue

@@ -9,6 +9,12 @@
         <div v-for="playlist in playlists" :key="playlist.id">
             <router-link :to="`/playlist?list=${playlist.id}`">
                 <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
+                <div class="relative text-sm">
+                    <span
+                        class="thumbnail-overlay thumbnail-right"
+                        v-text="`${playlist.videos} ${$t('video.videos')}`"
+                    />
+                </div>
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
                     class="my-2 overflow-hidden flex link"

src/components/SearchSuggestions.vue

@@ -82,8 +82,22 @@ export default {
 
 <style>
 .suggestions-container {
-    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-[600rem] w-full box-border p-[15rem] mb-[15rem] z-10 lt-md:max-w-[calc(100%-0.5rem)];
-    background: var(--efy_text2);
-    box-shadow: 0 0 20px var(--efy_text_trans);
+    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 lt-md:max-w-[calc(100%-0.5rem)] bg-gray-300;
+}
+
+.dark .suggestions-container {
+    @apply bg-dark-400;
+}
+
+.suggestion-selected {
+    @apply bg-gray-200;
+}
+
+.dark .suggestion-selected {
+    @apply bg-dark-100;
+}
+
+.suggestion {
+    @apply p-y-1;
 }
 </style>

src/components/SortingSelector.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { defineEmits, defineProps, ref, watch } from "vue";
+import { ref, watch } from "vue";
 
 const options = {
     most_recent: "descending",

src/components/VideoPlayer.vue

@@ -12,8 +12,11 @@
 <script>
 import("shaka-player/dist/controls.css");
 const shaka = import("shaka-player/dist/shaka-player.ui.js");
-import muxjs from "mux.js";
-window.muxjs = muxjs;
+if (!window.muxjs) {
+    import("mux.js").then(muxjs => {
+        window.muxjs = muxjs;
+    });
+}
 const hotkeys = import("hotkeys-js");
 
 export default {
@@ -519,9 +522,8 @@ export default {
                 });
                 videoEl.volume = this.getPreferenceNumber("volume", 1);
                 const rate = this.getPreferenceNumber("rate", 1);
-                player.trickPlay(rate);
-                player.playbackRate = rate;
-                player.defaultPlaybackRate = rate;
+                videoEl.playbackRate = rate;
+                videoEl.defaultPlaybackRate = rate;
             });
         },
         async updateProgressDatabase(time) {

src/components/WatchVideo.vue

@@ -74,7 +74,6 @@
                     <!-- Verified Badge -->
                     <font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
                 </div>
-
                 <div class="pp-watch-buttons">
                     <!-- Subscribe button -->
                     <button