Merge branch 'VueTubeApp:main' into main

NUXT/components/Comments/mainCommentRenderer.vue

@@ -32,7 +32,7 @@
       <v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
     </div>
 
-    <div class="loading" v-if="loading">
+    <div v-if="loading" class="loading">
       <v-sheet
         v-for="i in comments.length <= 0 ? 5 : 1"
         :key="i"
@@ -50,6 +50,7 @@
         :defaultContinuation="replyData.replyContinuation"
         class="transition-fast-in-fast-out v-card--reveal"
         style="height: 100%"
+        @closeComments="$emit('changeState', false)"
       ></main-comment-reply-renderer>
     </template>
   </dialog-base>
@@ -57,26 +58,26 @@
 
 <script>
 import dialogBase from "~/components/dialogBase.vue";
-import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
 import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.vue";
-import continuationItemRenderer from "~/components/observer.vue";
+import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
 import mainCommentReplyRenderer from "~/components/Comments/mainCommentReplyRenderer.vue";
+import continuationItemRenderer from "~/components/observer.vue";
+
+import backType from "~/plugins/classes/backType";
 
 export default {
-  props: ["defaultContinuation", "commentData", "showComments"],
+  components: {
-
+    dialogBase,
+    commentThreadRenderer,
+    commentsHeaderRenderer,
+    mainCommentReplyRenderer,
+    continuationItemRenderer,
+  },
   model: {
     prop: "showComments",
     event: "changeState",
   },
-
+  props: ["defaultContinuation", "commentData", "showComments"],
-  components: {
-    dialogBase,
-    commentsHeaderRenderer,
-    commentThreadRenderer,
-    continuationItemRenderer,
-    mainCommentReplyRenderer,
-  },
 
   data: () => ({
     loading: true,
@@ -145,6 +146,18 @@ export default {
 
     openReply(event) {
       this.showReply = true;
+      if (this.showReply) {
+        const dismissReply = new backType(
+          () => {
+            this.showReply = false;
+          },
+          () => {
+            return this.showReply;
+          }
+        );
+        this.$vuetube.addBackAction(dismissReply);
+      }
+
       this.replyData = { parent: event, replyContinuation: null };
     },
   },

NUXT/components/Comments/mainCommentReplyRenderer.vue

@@ -31,18 +31,16 @@ import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.v
 import continuationItemRenderer from "~/components/observer.vue";
 
 export default {
-  props: ["defaultContinuation", "parentComment", "showReplies"],
-
-  model: {
-    prop: "showReplies",
-    event: "changeState",
-  },
-
   components: {
     dialogBase,
     commentsHeaderRenderer,
     commentThreadRenderer,
     continuationItemRenderer,
   },
+  model: {
+    prop: "showReplies",
+    event: "changeState",
+  },
+  props: ["defaultContinuation", "parentComment", "showReplies"],
 };
 </script>

NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss

@@ -1,2 +0,0 @@
-@import "~vuetify/src/styles/settings/_variables";
-$bottom-sheet-inset-width: 70% !default;

NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js

@@ -1,4 +0,0 @@
-import swipeableBottomSheet from "./swipeableBottomSheet";
-
-export { swipeableBottomSheet };
-export default swipeableBottomSheet;

NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js

@@ -1,34 +0,0 @@
-import "./swipeableBottomSheet.sass";
-
-// Extensions
-import { VDialog } from "vuetify/lib";
-
-/* @vue/component */
-export default VDialog.extend({
-  name: "swipeable-bottom-sheet",
-
-  props: {
-    inset: Boolean,
-    maxWidth: [String, Number],
-    transition: {
-      type: String,
-      default: "bottom-sheet-transition",
-    },
-  },
-
-  computed: {
-    classes() {
-      return {
-        ...VDialog.options.computed.classes.call(this),
-        "swipeable-bottom-sheet": true,
-        "swipeable-bottom-sheet--inset": this.inset,
-      };
-    },
-    contentClasses() {
-      return {
-        "swipeable-bottom-sheet__content": true,
-        "swipeable-bottom-sheet__content--active": this.isActive,
-      };
-    },
-  },
-});

NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass

@@ -1,44 +0,0 @@
-@import './_variables.scss'
-
-// Transition
-.bottom-sheet-transition
-  &-enter
-    transform: translateY(100%)
-
-  &-leave-to
-    transform: translateY(100%)
-
-// Block
-
-.swipeable-bottom-sheet
-
-  &.v-dialog
-    align-self: flex-end
-    border-radius: 0
-    flex: 0 1 auto
-    margin: 0
-    overflow: visible
-
-    &.swipeable-bottom-sheet--inset
-      max-width: $bottom-sheet-inset-width
-
-      @media #{map-get($display-breakpoints, 'xs-only')}
-        max-width: none
-    
-    &.v-dialog:not(.v-dialog--fullscreen)
-      max-height: 100%
-      height: 100%
-  
-.swipeable-bottom-sheet__content
-  align-items: center
-  display: flex
-  justify-content: center
-  pointer-events: none
-  position: absolute
-  transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
-  width: 100%
-  height: 100%
-  outline: none
-  inset: 0
-
-

NUXT/components/bottomNavigation.vue

@@ -6,15 +6,20 @@
     <v-divider v-if="!$store.state.tweaks.roundTweak" />
     <v-bottom-navigation
       v-model="tabSelection"
-      style="padding: 0 !important; box-shadow: none !important"
+      style="
-      class="transparent"
+        box-shadow: none !important;
+        padding: 0 !important;
+        position: relative;
+      "
+      class="transparent nav"
       :shift="$store.state.tweaks.navigationShift"
     >
       <v-btn
         v-for="(item, i) in tabs"
         :key="i"
         v-ripple="false"
-        class="navButton"
+        active-class="link-active"
+        class="navButton link"
         :to="item.link"
         plain
       >
@@ -31,7 +36,7 @@
                 : 'var(--v-background-darken4)',
           }"
           :class="
-            tabSelection == i
+            tabSelection == i && $store.state.tweaks.navigationShift
               ? $vuetify.theme.dark
                 ? 'tab primary darken-4'
                 : 'tab primary lighten-4'
@@ -53,7 +58,7 @@
             v-if="$store.state.tweaks.navigationIcons === 2"
             xmlns="http://www.w3.org/2000/svg"
             fill="currentColor"
-            viewBox="0 0 20 20"
+            viewBox="0 0 21 21"
             height="1.5rem"
             width="1.5rem"
             class="mt-1"
@@ -64,7 +69,7 @@
             v-if="$store.state.tweaks.navigationIcons === 3"
             xmlns="http://www.w3.org/2000/svg"
             fill="currentColor"
-            viewBox="0 0 32 32"
+            viewBox="0 0 33 33"
             height="1.5rem"
             width="1.5rem"
             class="mt-1"
@@ -74,6 +79,7 @@
         </div>
         <v-icon
           v-if="$store.state.tweaks.navigationIcons === 0"
+          class="my-1"
           :color="
             tabSelection == i
               ? 'primary'
@@ -82,7 +88,7 @@
               : 'background darken-4'
           "
           :class="
-            tabSelection == i
+            tabSelection == i && $store.state.tweaks.navigationShift
               ? $vuetify.theme.dark
                 ? 'tab primary darken-4'
                 : 'tab primary lighten-4'
@@ -92,6 +98,13 @@
         />
         <!-- + (tabSelection == i ? '' : '-outline') -->
       </v-btn>
+      <div
+        v-if="!$store.state.tweaks.navigationShift"
+        :style="{
+          top: $store.state.tweaks.navigationText ? '0.35rem' : '0.75rem',
+        }"
+        class="link-anime"
+      ></div>
       <!-- <v-btn
         text
         class="navButton mr-2 fill-height"
@@ -151,15 +164,41 @@ export default {
 </script>
 
 <style scoped>
+.link-anime {
+  right: 0;
+  height: 2rem;
+  width: 3.25rem;
+  position: absolute;
+  transition: transform 0.15s ease-in-out, scale 0.1s ease;
+  background-color: var(--v-primary-base);
+  padding: 0.1em 0.5em 0.1em 0.5em;
+  border-radius: 2rem;
+  opacity: 0.25;
+  z-index: -1;
+  scale: 0;
+}
+/* TODO: calculate inside <template></template> based on tabs.length */
+.nav .link:first-child.link-active ~ .link-anime {
+  transform: translateX(calc(-75vw + 50%));
+  scale: 1;
+}
+.nav .link:nth-child(2).link-active ~ .link-anime {
+  transform: translateX(calc(-50vw + 50%));
+  scale: 1;
+}
+.nav .link:nth-child(3).link-active ~ .link-anime {
+  transform: translateX(calc(-25vw + 50%));
+  scale: 1;
+}
 .bottomNav {
   /* box-shadow: inset 0 0 10rem var(--v-background-base) !important; */
   height: calc(4rem + env(safe-area-inset-bottom)) !important;
   padding-bottom: env(safe-area-inset-bottom) !important;
   box-shadow: none !important;
   position: fixed;
+  z-index: 100;
   width: 100%;
   bottom: 0;
-  z-index: 100;
 }
 .navButton {
   width: 25vw !important;

NUXT/components/dialogBase.vue

@@ -4,7 +4,7 @@
       class="toolbar-container d-flex flex-column background"
       style="flex-direction: column !important"
     >
-      <v-toolbar color="background" flat>
+      <v-toolbar color="background" style="position: sticky; top: 0" flat>
         <slot name="header"></slot>
       </v-toolbar>
       <v-divider></v-divider>

NUXT/pages/watch.vue

@@ -241,21 +241,17 @@
         "
       />
 
-      <swipeable-bottom-sheet
+      <div
         v-if="loaded && video.commentData"
-        v-model="showComments"
+        :class="showComments ? 'comments-open' : ''"
-        hide-overlay
+        class="scroll-y comments"
-        persistent
-        no-click-animation
-        style="z-index: 2 !important"
-        attach="#content-container"
       >
         <mainCommentRenderer
           v-model="showComments"
           :comment-data="video.commentData"
           :default-continuation="video.commentContinuation"
         ></mainCommentRenderer>
-      </swipeable-bottom-sheet>
+      </div>
 
       <!-- <swipeable-bottom-sheet
       :v-model="showComments"
@@ -281,14 +277,12 @@
 </template>
 
 <script>
-import player from "~/components/Player/index.vue";
 import { Share } from "@capacitor/share";
 import { getCpn } from "~/plugins/utils";
-import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
+import player from "~/components/Player/index.vue";
 import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
-import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
 import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
 
 import backType from "~/plugins/classes/backType";
@@ -296,11 +290,9 @@ import backType from "~/plugins/classes/backType";
 export default {
   components: {
     player,
-    ShelfRenderer,
     VidLoadRenderer,
     ItemSectionRenderer,
     mainCommentRenderer,
-    SwipeableBottomSheet,
     SlimVideoDescriptionRenderer,
   },
   layout: "empty",
@@ -494,6 +486,7 @@ export default {
 
     // Toggle this.showComments to true or false. If it is true, then add the dismiss function to backStack.
     toggleComment() {
+      document.getElementById("content-container").scrollTo(0, 0);
       this.showComments = !this.showComments;
       if (this.showComments) {
         const dismissComment = new backType(
@@ -512,6 +505,24 @@ export default {
 </script>
 
 <style>
+.comments {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  z-index: 2;
+  height: 100%;
+  max-height: 100%;
+  position: absolute;
+  pointer-events: none;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+.comments-open {
+  transform: translatey(0);
+  pointer-events: auto;
+  opacity: 1;
+}
 #watch-body {
   height: 100%;
   max-height: 100vh;

NUXT/plugins/languages/malay.js

@@ -8,7 +8,7 @@ module.exports = {
     restart: "Mulakan semula",
     later: "Kemudian",
     settingRestart:
-      "Mengubah tetapan ini memerlukan apl untuk dimulakan semula untuk menerapkan tetapan.",
+      "Mengubah tetapan ini memerlukan apl dimulakan semula untuk menerapkan tetapan.",
     okay: "OK",
   },
 
@@ -27,8 +27,8 @@ module.exports = {
     plugins: "Pemalam",
     startup: "Permulaan",
     theme: "Tema",
-    tweaks: "Pelarasan",
+    tweaks: "Pengubahsuaian",
-    updates: "Kemaskini"
+    updates: "Kemaskini",
   },
 
   index: {
@@ -41,7 +41,7 @@ module.exports = {
     general: "Umum",
     theme: "Tema",
     player: "Pemain",
-    uitweaker: "Pelarasan UI",
+    uitweaker: "Pengubahsuaian UI",
     startupoptions: "Pilihan Permulaan",
     plugins: "Pemalam",
     updates: "Kemaskini",
@@ -55,7 +55,7 @@ module.exports = {
       language: "Bahasa",
       backup: "Sandaran",
       backupinfo: "Sandarkan atau pulihkan semula tetapan aplikasi anda",
-      restore: "Pulihkan semula"
+      restore: "Pulihkan semula",
     },
     theme: {
       normal: "Normal",
@@ -69,9 +69,9 @@ module.exports = {
     tweaks: {
       fullscreen: "Skrin Penuh",
       navbarblur: "Bar Navigasi Kabur",
-      roundedcorners: "Sudut Bulat",
+      roundedcorners: "Sudut Berbucu Bulat",
-      roundthumbnails: "Lakaran Kecil Bulat",
+      roundthumbnails: "Lakaran Kecil Berbucu Bulat",
-      roundwatchpagecomponents: "Komponen Halaman Tonton Bulat",
+      roundwatchpagecomponents: "Komponen Halaman Tonton Berbucu Bulat",
       radius: "Radius",
     },
     startup: {

readme/readme.hu.md

@@ -76,16 +76,18 @@ Az alkalmazás telepítéséhez látogasson el erre az oldalra [vuetube.app/inst
 
 ### Android
 
-| <a href=https://nightly.link/VueTubeApp/VueTube/workflows/ci/main/android.zip><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getunstable.png></a> | <a href=https://github.com/VueTubeApp/VueTube/releases/tag/0.4.2><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getcanary.png></a> | <a href=https://vuetube.app/install><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getstable.png></a> |
+| <a href=https://nightly.link/VueTubeApp/VueTube/workflows/ci/main/android.zip><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getunstable.png></a> | <a href=https://github.com/VueTubeApp/VueTube/releases/tag/0.5><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getcanary.png></a> | <a href=https://vuetube.app/install><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getstable.png></a> |
 | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Eléggé unstabil, de előre megkapod a legújabb funkciókat.                                                                                                                                           | Kevesebb hiba van benne mint a Unstable-ben, de mégis több a funkció benne mint a Stable-ben.                                                                                        | Még nem elérhető.                                                                                                                                       |
 
 ### iOS
 
-| <a href=https://nightly.link/VueTubeApp/VueTube/workflows/ci/main/iOS.zip><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getunstable.png></a> | <a href=https://cdn.discordapp.com/attachments/949908267855921163/972164558930198528/VueTube-Canary-May-6-2022.ipa><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getcanary.png></a> | <a href=https://vuetube.app/install><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getstable.png></a> |
+| <a href=https://nightly.link/VueTubeApp/VueTube/workflows/ci/main/iOS.zip><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getunstable.png></a> | <a href=https://github.com/VueTubeApp/VueTube/releases/tag/0.3><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getcanary.png></a> | <a href=https://vuetube.app/install><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getstable.png></a> |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Eléggé unstabil, de előre megkapod a legújabb funkciókat.                                                                                                                                       | Kevesebb hiba van benne mint a Unstable-ben, de mégis több a funkció benne mint a Stable-ben.                                                                                                                                          | Még nem elérhető.                                                                                                                                       |
 
+(Az Apple hivatalosan nem támogatja a sideloading-ot, vagyis nem lehet az alkalmazások telepítését csak a fájllal tenni anélkül, hogy azokat feltöltenék a cég hivatalos boltjába. A VueTube iPhone / iPad eszközökre történő telepítéséhez speciális módszereket kell használod)
+
 </details>
 
 <h2 align="left">