mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-24 20:25:17 +00:00
Merge branch 'VueTubeApp:main' into main
This commit is contained in:
gayolGate | Dev Studio
GitHub
commit
8b8097f949
11 changed files with 115 additions and 136 deletions
|
|
@ -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",
|
||||
},
|
||||
|
||||
components: {
|
||||
dialogBase,
|
||||
commentsHeaderRenderer,
|
||||
commentThreadRenderer,
|
||||
continuationItemRenderer,
|
||||
mainCommentReplyRenderer,
|
||||
},
|
||||
props: ["defaultContinuation", "commentData", "showComments"],
|
||||
|
||||
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 };
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@import "~vuetify/src/styles/settings/_variables";
|
||||
$bottom-sheet-inset-width: 70% !default;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import swipeableBottomSheet from "./swipeableBottomSheet";
|
||||
|
||||
export { swipeableBottomSheet };
|
||||
export default swipeableBottomSheet;
|
||||
|
|
@ -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,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -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"
|
||||
class="transparent"
|
||||
style="
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -241,21 +241,17 @@
|
|||
"
|
||||
/>
|
||||
|
||||
<swipeable-bottom-sheet
|
||||
<div
|
||||
v-if="loaded && video.commentData"
|
||||
v-model="showComments"
|
||||
hide-overlay
|
||||
persistent
|
||||
no-click-animation
|
||||
style="z-index: 2 !important"
|
||||
attach="#content-container"
|
||||
:class="showComments ? 'comments-open' : ''"
|
||||
class="scroll-y comments"
|
||||
>
|
||||
<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;
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
updates: "Kemaskini"
|
||||
tweaks: "Pengubahsuaian",
|
||||
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",
|
||||
roundthumbnails: "Lakaran Kecil Bulat",
|
||||
roundwatchpagecomponents: "Komponen Halaman Tonton Bulat",
|
||||
roundedcorners: "Sudut Berbucu Bulat",
|
||||
roundthumbnails: "Lakaran Kecil Berbucu Bulat",
|
||||
roundwatchpagecomponents: "Komponen Halaman Tonton Berbucu Bulat",
|
||||
radius: "Radius",
|
||||
},
|
||||
startup: {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue