Merge branch 'TeamPiped:master' into master

README.md

@@ -14,7 +14,7 @@ An open-source alternative frontend for YouTube which is efficient by design.
 
 YouTube has an extremely invasive privacy policy which relies on using user data in unethical ways. You give them a lot of data - ranging from ideas, music taste, content, political opinions, and much more than you think.
 
-By using Piped, you can freely watch and listen to content freely without the fear of prying eyes watching everything you are doing.
+By using Piped, you can freely watch and listen to content without the fear of prying eyes watching everything you are doing.
 
 ## Features:
 
@@ -85,7 +85,7 @@ You can help by translating the project to a language you speak at https://hoste
 -   Stage your files `git add .`
 -   Commit your changes `git commit -am 'Add awesome new feature'`
 -   Push to the branch `git push origin my-awesome-feature`
--   Create a new pull request: https://github.com/TeamPiped/Piped-Redirects/compare
+-   Create a new pull request: https://github.com/TeamPiped/Piped/compare
 
 ### Development Setup
 

src/components/ChaptersBar.vue

@@ -1,11 +1,29 @@
 <template>
-    <!-- <h2 v-t="'video.chapters'" class="mb-5" /> -->
-    <div class="flex overflow-x-auto">
+    <!-- desktop view -->
+    <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 <lg:hidden">
+        <h2 v-t="'video.chapters'" class="mb-2 bg-gray-500/50 p-2" />
+        <div
+            :key="chapter.start"
+            v-for="chapter in chapters"
+            @click="$emit('seek', chapter.start)"
+            class="chapter-vertical"
+        >
+            <div class="flex">
+                <img :src="chapter.image" :alt="chapter.title" />
+                <div class="flex flex-col m-2">
+                    <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
+                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- mobile view -->
+    <div v-else class="flex overflow-x-auto">
         <div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
-            <img :src="chapter.image" :alt="chapter.title" class="" />
+            <img :src="chapter.image" :alt="chapter.title" />
             <div class="m-1 flex">
                 <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
-                <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
     </div>
@@ -16,20 +34,22 @@
     height: 5px;
 }
 .chapter {
-    @apply cursor-pointer;
-    align-self: center;
-    padding: 10px;
+    @apply cursor-pointer self-center p-2.5;
     img {
-        width: 100%;
-        height: 100%;
+        @apply w-full h-full;
     }
 }
+.chapter-vertical {
+    @apply cursor-pointer self-center p-2.5;
+    img {
+        @apply w-3/10 h-3/10;
+    }
+}
+.chapter-vertical:hover {
+    @apply bg-gray-500;
+}
 .text-truncate {
-    white-space: nowrap;
-    width: 10em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
+    @apply truncate overflow-hidden inline-block w-10em;
 }
 </style>
 
@@ -38,6 +58,10 @@ import { defineProps, defineEmits } from "vue";
 
 defineProps({
     chapters: Object,
+    mobileLayout: {
+        type: Boolean,
+        default: () => true,
+    },
 });
 
 defineEmits(["seek"]);

src/components/WatchVideo.vue

@@ -16,16 +16,23 @@
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
-            <VideoPlayer
-                ref="videoPlayer"
-                :video="video"
-                :sponsors="sponsors"
-                :playlist="playlist"
-                :index="index"
-                :selected-auto-play="selectedAutoPlay"
-                :selected-auto-loop="selectedAutoLoop"
-            />
-            <ChaptersBar v-if="video?.chapters?.length > 0" :chapters="video.chapters" @seek="navigate" />
+            <div :class="isMobile ? 'flex-col' : 'flex'">
+                <VideoPlayer
+                    ref="videoPlayer"
+                    :video="video"
+                    :sponsors="sponsors"
+                    :playlist="playlist"
+                    :index="index"
+                    :selected-auto-play="selectedAutoPlay"
+                    :selected-auto-loop="selectedAutoLoop"
+                />
+                <ChaptersBar
+                    :mobileLayout="isMobile"
+                    v-if="video?.chapters?.length > 0"
+                    :chapters="video.chapters"
+                    @seek="navigate"
+                />
+            </div>
             <div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
 
             <div class="flex mb-1.5">
@@ -203,6 +210,7 @@ export default {
             smallViewQuery: smallViewQuery,
             smallView: smallViewQuery.matches,
             showModal: false,
+            isMobile: true,
         };
     },
     computed: {
@@ -226,6 +234,18 @@ export default {
         },
     },
     mounted() {
+        // check screen size
+        if (window.innerWidth >= 1024) {
+            this.isMobile = false;
+        }
+        // add an event listener to watch for screen size changes
+        window.addEventListener("resize", () => {
+            if (window.innerWidth >= 1024) {
+                this.isMobile = false;
+            } else {
+                this.isMobile = true;
+            }
+        });
         this.getVideoData().then(() => {
             (async () => {
                 const videoId = this.getVideoId();

src/locales/cs.json

@@ -21,9 +21,9 @@
         "back": "Zpět",
         "uses_api_from": "Používá API od ",
         "enable_sponsorblock": "Zapnout Sponsorblock",
-        "skip_intro": "Přeskočit přestávku/úvodní animaci",
-        "skip_preview": "Přeskočit Náhled/Shrnutí",
-        "skip_interaction": "Přeskočit připomenutí interakce (odebírat)",
+        "skip_intro": "Přeskočit přestávku / úvodní animaci",
+        "skip_preview": "Přeskočit náhled / shrnutí",
+        "skip_interaction": "Přeskočit připomenutí interakce (odběr)",
         "dark": "Tmavý",
         "light": "Světlý",
         "autoplay_video": "Automatické přehrávání videa",
@@ -31,13 +31,13 @@
         "default_quality": "Výchozí kvalita",
         "buffering_goal": "Ukládání do vyrovnávací paměti (v sekundách)",
         "country_selection": "Výběr země",
-        "default_homepage": "Výchozí Domovská stránka",
+        "default_homepage": "Výchozí domovská stránka",
         "show_comments": "Zobrazit komentáře",
         "minimize_description_default": "Automaticky minimalizovat popis",
         "store_watch_history": "Uložit historii sledování",
         "language_selection": "Výběr jazyka",
         "instances_list": "Seznam instancí",
-        "enabled_codecs": "Povolené kodeky (Více)",
+        "enabled_codecs": "Povolené kodeky (několik)",
         "instance_selection": "Výběr instance",
         "show_more": "Zobrazit více",
         "yes": "Ano",
@@ -46,9 +46,9 @@
         "import_from_json": "Importovat z JSON",
         "auto_play_next_video": "Automaticky přehrát další video",
         "donations": "Darovat",
-        "show_description": "Ukázat popis",
-        "minimize_recommendations": "Minimalizovat doporučení",
-        "skip_outro": "Přeskočit Doporučená videa/Závěrečné titulky",
+        "show_description": "Zobrazit popis",
+        "minimize_recommendations": "Skrýt doporučení",
+        "skip_outro": "Přeskočit koncové karty / titulky",
         "auto": "Auto",
         "show_recommendations": "Zobrazit doporučení",
         "disable_lbry": "Zakázat LBRY pro streamování",
@@ -63,20 +63,21 @@
         "load_more_replies": "Načíst další odpovědi",
         "unsubscribe": "Zrušit odběr - {count}",
         "skip_sponsors": "Přeskočit sponzory",
-        "minimize_description": "Minimalizovat popis",
-        "skip_non_music": "Přeskočit Hudbu: Nehudební sekce",
-        "skip_self_promo": "Přeskočit Neplacenou/Vlastní propagaci",
+        "minimize_description": "Skrýt popis",
+        "skip_non_music": "Přeskočit hudbu: nehudební sekce",
+        "skip_self_promo": "Přeskočit neplacenou / vlastní propagaci",
         "theme": "Téma",
-        "skip_highlight": "Přeskočit Highlight",
+        "skip_highlight": "Přeskočit na zvýraznění",
         "skip_filler_tangent": "Přeskočit výplňový obsah",
         "add_to_playlist": "Přidat do playlistu",
         "remove_from_playlist": "Odstranit z playlistu",
         "delete_playlist_confirm": "Opravdu si přejete odstranit tento playlist?",
         "please_select_playlist": "Prosím vyberte playlist",
-        "create_playlist": "Vytvořit Playlist",
-        "delete_playlist": "Odstranit Playlist",
-        "select_playlist": "Vybrat Playlist",
-        "delete_playlist_video_confirm": "Opravdu si přejete odstranit toto video z tohoto playlistu?"
+        "create_playlist": "Vytvořit playlist",
+        "delete_playlist": "Odstranit playlist",
+        "select_playlist": "Vyberte playlist",
+        "delete_playlist_video_confirm": "Opravdu si přejete odstranit toto video z tohoto playlistu?",
+        "show_markers": "Zobrazit značky na přehrávači"
     },
     "player": {
         "watch_on": "Sledovat na {0}"

src/locales/it.json

@@ -89,7 +89,8 @@
         "videos": "Video",
         "ratings_disabled": "Valutazioni disabilitate",
         "live": "{0} Diretta",
-        "chapters": "Capitoli"
+        "chapters": "Capitoli",
+        "shorts": "Shorts"
     },
     "preferences": {
         "ssl_score": "Valutazione SSL",