TeamPiped-mirror
/
Piped
mirror of https://github.com/TeamPiped/Piped.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: setting for disabling animations

This commit is contained in:
Filipe Medeiros 2021-10-12 10:42:32 +01:00
parent 31fde1f29c
commit 660788c78e
6 changed files with 133 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.vue
View File

@ -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")) {

118
src/components/MenuDesktop.vue
View File

@ -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>

42
src/components/MenuMobile.vue
View File

@ -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>

13
src/components/Preferences.vue
View File

@ -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();
}

3
src/locales/en.json
View File

@ -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
View File

@ -9,3 +9,13 @@ export function useIsMobile() {
return isMobile;
}
const menuCollapsed = ref(false);
export function useMenuCollapsed() {
return {
menuCollapsed,
toggleCollapsed: () => {
menuCollapsed.value = !menuCollapsed.value;
},
};
}