mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-21 21:17:26 +00:00
feat: setting for disabling animations
This commit is contained in:
Filipe Medeiros
parent
31fde1f29c
commit
660788c78e
11
src/App.vue
11
src/App.vue
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="uk-flex">
|
||||
<Menu
|
||||
style="flexShrink: 0"
|
||||
:collapsed="menuCollapsed"
|
||||
:toggleCollapsed="() => (menuCollapsed = !menuCollapsed)"
|
||||
/>
|
||||
<Menu style="flexShrink: 0" />
|
||||
<main
|
||||
class="uk-container uk-container-expand"
|
||||
style="height: 100vh; overflow: scroll; flex: 1;"
|
||||
@ -13,7 +9,7 @@
|
||||
>
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :max="5">
|
||||
<component :is="Component" :key="$route.fullPath" :menuCollapsed="menuCollapsed" />
|
||||
<component :is="Component" :key="$route.fullPath" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
|
||||
@ -44,9 +40,6 @@ export default {
|
||||
const isMobile = useIsMobile();
|
||||
return { isMobile };
|
||||
},
|
||||
data() {
|
||||
return { menuCollapsed: false };
|
||||
},
|
||||
mounted() {
|
||||
if (window.location.pathname === "/" || window.location.pathname.length == 0)
|
||||
switch (this.getPreferenceString("homepage", "trending")) {
|
||||
|
||||
@ -1,26 +1,41 @@
|
||||
<template>
|
||||
<div
|
||||
id="menu-desktop"
|
||||
class="uk-height-viewport uk-flex uk-flex-column uk-flex-middle"
|
||||
:class="{ 'collapse-text': collapseText }"
|
||||
style="transition: width 400ms; padding: 32px 24px; height: 100vh;"
|
||||
:style="{ width: collapsed ? '78px' : '291px', backgroundColor: secondaryBackgroundColor }"
|
||||
style="padding: 32px 24px; height: 100vh;"
|
||||
:style="{
|
||||
width: collapsed ? '78px' : '291px',
|
||||
backgroundColor: secondaryBackgroundColor,
|
||||
transition: enableAnimations ? 'width 400ms' : 'none',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="uk-width-1-1 uk-flex uk-flex-middle uk-flex-between"
|
||||
style="margin-bottom: 100px; height: 50px; transition: padding 400ms; padding: 0 14px;"
|
||||
:style="collapseText ? 'padding: 0;' : {}"
|
||||
style="margin-bottom: 100px; height: 50px;"
|
||||
:style="{ padding: collapseText ? '0' : '0 14px', transition: enableAnimations ? 'padding 400ms;' : '' }"
|
||||
:class="{ 'uk-flex uk-flex-center': collapsed }"
|
||||
>
|
||||
<div style="transition: padding 400ms; flex: 1 0 30px;" :style="collapseText ? 'padding: 0 8px;' : {}">
|
||||
<div
|
||||
style="flex: 1 0 30px;"
|
||||
:style="{ padding: collapseText ? '0 8px' : '', transition: enableAnimations ? 'padding 400ms;' : '' }"
|
||||
>
|
||||
<font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
|
||||
</div>
|
||||
<div
|
||||
class="uk-flex uk-flex-middle"
|
||||
style="gap: 16px; transition: transform 300ms, gap 300ms;"
|
||||
:style="collapseText ? 'transform: scale3d(0, 0, 0); gap: 0;' : 'transition-delay: 170ms'"
|
||||
:style="{
|
||||
transform: collapseText ? 'scale3d(0, 0, 0)' : 'none',
|
||||
gap: collapseText ? '0' : '16px',
|
||||
transitionDelay: !collapseText && enableAnimations ? '170ms' : 'none',
|
||||
transition: enableAnimations ? 'transform 300ms, gap 300ms' : 'none',
|
||||
}"
|
||||
v-if="!hideText"
|
||||
>
|
||||
<img src="/img/pipedPlay.svg" :class="{ 'piped-play': !hideText }" />
|
||||
<img
|
||||
src="/img/pipedPlay.svg"
|
||||
:class="{ 'piped-play': !hideText, 'enable-animations': enableAnimations }"
|
||||
/>
|
||||
|
||||
<img src="/img/piped.svg" />
|
||||
</div>
|
||||
@ -32,6 +47,7 @@
|
||||
<router-link
|
||||
to="/"
|
||||
class="highlight sidebar-link uk-flex"
|
||||
:class="{ 'enable-animations': enableAnimations }"
|
||||
:style="collapseText ? 'padding: 6px 8px;' : {}"
|
||||
>
|
||||
<font-awesome-icon icon="fire" />
|
||||
@ -39,13 +55,21 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/feed" class="highlight sidebar-link uk-flex">
|
||||
<router-link
|
||||
to="/feed"
|
||||
class="highlight sidebar-link uk-flex"
|
||||
:class="{ 'enable-animations': enableAnimations }"
|
||||
>
|
||||
<font-awesome-icon icon="rss" />
|
||||
<span v-if="!hideText" v-t="'titles.feed'" />
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/subscriptions" class="highlight sidebar-link uk-flex">
|
||||
<router-link
|
||||
to="/subscriptions"
|
||||
class="highlight sidebar-link uk-flex"
|
||||
:class="{ 'enable-animations': enableAnimations }"
|
||||
>
|
||||
<font-awesome-icon icon="heart" />
|
||||
<span v-if="!hideText" v-t="'titles.subscriptions'" />
|
||||
</router-link>
|
||||
@ -56,6 +80,7 @@
|
||||
<router-link
|
||||
to="/preferences"
|
||||
class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle"
|
||||
:class="{ 'enable-animations': enableAnimations }"
|
||||
style="text-decoration: none;"
|
||||
>
|
||||
<font-awesome-icon icon="cog" />
|
||||
@ -64,17 +89,20 @@
|
||||
|
||||
<button
|
||||
class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
|
||||
:class="{ 'enable-animations': enableAnimations }"
|
||||
:style="{ backgroundColor: backgroundColor }"
|
||||
style="border-radius: 9999px; border: none; margin-top: 20px;"
|
||||
@click="logout"
|
||||
@click="logout()"
|
||||
>
|
||||
<span v-if="!hideText">Log out</span>
|
||||
<span v-if="!hideText" v-t="'actions.logout'" />
|
||||
<font-awesome-icon icon="sign-out-alt" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useMenuCollapsed } from "../store";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -82,28 +110,38 @@ export default {
|
||||
hideText: this.collapsed,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
collapsed: Boolean,
|
||||
toggleCollapsed: Function,
|
||||
setup() {
|
||||
const { menuCollapsed, toggleCollapsed } = useMenuCollapsed();
|
||||
return { collapsed: menuCollapsed, toggleCollapsed };
|
||||
},
|
||||
watch: {
|
||||
collapsed(_collapsed) {
|
||||
if (this.enableAnimations) {
|
||||
if (_collapsed) {
|
||||
this.collapseText = true;
|
||||
setTimeout(() => {
|
||||
this.hideText = true;
|
||||
}, 450);
|
||||
} else {
|
||||
this.hideText = false;
|
||||
setTimeout(() => {
|
||||
this.collapseText = false;
|
||||
}, 0);
|
||||
}
|
||||
} else {
|
||||
this.hideText = _collapsed;
|
||||
this.collapseText = _collapsed;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
alert("logging out");
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
collapsed(collapsed) {
|
||||
if (collapsed) {
|
||||
this.collapseText = true;
|
||||
setTimeout(() => {
|
||||
this.hideText = true;
|
||||
}, 450);
|
||||
} else {
|
||||
this.hideText = false;
|
||||
setTimeout(() => {
|
||||
this.collapseText = false;
|
||||
}, 0);
|
||||
}
|
||||
computed: {
|
||||
enableAnimations(_this) {
|
||||
return !_this.getPreferenceBoolean("disableAnimations", true);
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -146,52 +184,54 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.piped-play {
|
||||
#menu-desktop .piped-play.enable-animations {
|
||||
animation: bump 300ms ease-in-out;
|
||||
animation-delay: 700ms !important;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
.piped-play {
|
||||
#menu-desktop .piped-play {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
#menu-desktop .logout-button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
#menu-desktop .button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
#menu-desktop .highlight {
|
||||
color: #abb2c6;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
#menu-desktop .sidebar-link {
|
||||
gap: 14px !important;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#menu-desktop .sidebar-link.enable-animations {
|
||||
transition: padding 400ms, gap 400ms;
|
||||
}
|
||||
|
||||
.collapse-text .sidebar-link {
|
||||
#menu-desktop.collapse-text .sidebar-link {
|
||||
padding: 6px;
|
||||
gap: 0px !important;
|
||||
}
|
||||
|
||||
.sidebar-link span {
|
||||
#menu-desktop .sidebar-link.enable-animations span {
|
||||
transition: font-size 400ms;
|
||||
}
|
||||
.collapse-text .sidebar-link span {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.highlight:hover,
|
||||
.router-link-active {
|
||||
#menu-desktop .highlight:hover,
|
||||
#menu-desktop .router-link-active {
|
||||
color: #fff;
|
||||
}
|
||||
.router-link-active {
|
||||
#menu-desktop .router-link-active {
|
||||
background: linear-gradient(to right, #da22ff, #9733ee);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
id="menu-mobile"
|
||||
class="uk-flex uk-flex-column uk-flex-middle uk-position-fixed uk-position-top"
|
||||
:class="{ 'uk-height-viewport': !collapsed }"
|
||||
style="padding: 24px 12px; width: 100vw; box-sizing: border-box; z-index: 9999; transition: min-height 40ms, height 400ms; overflow: hidden;"
|
||||
@ -58,13 +59,15 @@
|
||||
style="border-radius: 9999px; border: none; margin-top: 20px;"
|
||||
@click="logout"
|
||||
>
|
||||
<span v-t="'actions.logout'">Log out</span>
|
||||
<span v-t="'actions.logout'" />
|
||||
<font-awesome-icon icon="sign-out-alt" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useMenuCollapsed } from "../store";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -72,10 +75,12 @@ export default {
|
||||
hideText: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
collapsed: Boolean,
|
||||
toggleCollapsed: Function,
|
||||
|
||||
setup() {
|
||||
const { menuCollapsed, toggleCollapsed } = useMenuCollapsed();
|
||||
return { collapsed: menuCollapsed, toggleCollapsed };
|
||||
},
|
||||
props: {
|
||||
searchText: String,
|
||||
onKeyUp: Function,
|
||||
onInputFocus: Function,
|
||||
@ -87,6 +92,11 @@ export default {
|
||||
alert("logging out");
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
disableAnimations(_this) {
|
||||
return _this.getPreferenceBoolean("disableAnimations", false);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -127,7 +137,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.piped-play {
|
||||
#menu-mobile .piped-play {
|
||||
animation: bump 300ms ease-in-out 500ms;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
@ -136,37 +146,39 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
#menu-mobile .logout-button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
#menu-mobile .button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
#menu-mobile .highlight {
|
||||
color: #abb2c6;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
#menu-mobile .sidebar-link {
|
||||
gap: 14px !important;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
transition: padding 500ms, gap 500ms;
|
||||
}
|
||||
#menu-mobile .sidebar-link.enable-animations {
|
||||
transition: padding 400ms, gap 400ms;
|
||||
}
|
||||
|
||||
.sidebar-link span {
|
||||
#menu-mobile .sidebar-link span {
|
||||
transition: font-size 500ms, padding 500ms;
|
||||
}
|
||||
.collapse-text .sidebar-link span {
|
||||
#menu-mobile.collapse-text .sidebar-link span {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.highlight:hover,
|
||||
.router-link-active {
|
||||
#menu-mobile .highlight:hover,
|
||||
#menu-mobile .router-link-active {
|
||||
color: #fff;
|
||||
}
|
||||
.router-link-active {
|
||||
#menu-mobile .router-link-active {
|
||||
background: linear-gradient(to right, #da22ff, #9733ee);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -176,6 +176,16 @@
|
||||
<option value="avc">AVC (h.264)</option>
|
||||
</select>
|
||||
<br />
|
||||
<label for="disableAnimations"><b v-t="'preferences.disable_animations'"/></label>
|
||||
<br />
|
||||
<input
|
||||
id="disableAnimations"
|
||||
v-model="disableAnimations"
|
||||
class="uk-checkbox"
|
||||
type="checkbox"
|
||||
@change="onChange($event)"
|
||||
/>
|
||||
<br />
|
||||
<label for="chkDisableLBRY"><b v-t="'actions.disable_lbry'"/></label>
|
||||
<br />
|
||||
<input id="chkDisableLBRY" v-model="disableLBRY" class="uk-checkbox" type="checkbox" @change="onChange($event)" />
|
||||
@ -273,6 +283,7 @@ export default {
|
||||
enabledCodecs: ["av1", "vp9", "avc"],
|
||||
disableLBRY: false,
|
||||
proxyLBRY: false,
|
||||
disableAnimations: false,
|
||||
};
|
||||
},
|
||||
activated() {
|
||||
@ -361,6 +372,7 @@ export default {
|
||||
this.enabledCodecs = this.getPreferenceString("enabledCodecs", "av1,vp9,avc").split(",");
|
||||
this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
|
||||
this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
|
||||
this.disableAnimations = this.getPreferenceBoolean("disableAnimations", false);
|
||||
if (this.selectedLanguage != "en") {
|
||||
try {
|
||||
this.CountryMap = await import("@/utils/CountryMaps/" + this.selectedLanguage + ".json").then(
|
||||
@ -414,6 +426,7 @@ export default {
|
||||
localStorage.setItem("enabledCodecs", this.enabledCodecs.join(","));
|
||||
localStorage.setItem("disableLBRY", this.disableLBRY);
|
||||
localStorage.setItem("proxyLBRY", this.proxyLBRY);
|
||||
localStorage.setItem("disableAnimations", this.disableAnimations);
|
||||
|
||||
if (shouldReload) window.location.reload();
|
||||
}
|
||||
|
||||
@ -74,7 +74,8 @@
|
||||
"instance_name": "Instance Name",
|
||||
"instance_locations": "Instance Locations",
|
||||
"has_cdn": "Has CDN?",
|
||||
"ssl_score": "SSL Score"
|
||||
"ssl_score": "SSL Score",
|
||||
"disable_animations": "Disable animations"
|
||||
},
|
||||
"login": {
|
||||
"username": "Username",
|
||||
|
||||
10
src/store.js
10
src/store.js
@ -9,3 +9,13 @@ export function useIsMobile() {
|
||||
|
||||
return isMobile;
|
||||
}
|
||||
|
||||
const menuCollapsed = ref(false);
|
||||
export function useMenuCollapsed() {
|
||||
return {
|
||||
menuCollapsed,
|
||||
toggleCollapsed: () => {
|
||||
menuCollapsed.value = !menuCollapsed.value;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user