From 660788c78ee1d0c48a963e029f456efe45fa821f Mon Sep 17 00:00:00 2001
From: Filipe Medeiros <filipesilvamedeiros@gmail.com>
Date: Tue, 12 Oct 2021 10:42:32 +0100
Subject: [PATCH] feat: setting for disabling animations

---
 src/App.vue                    |  11 +--
 src/components/MenuDesktop.vue | 118 ++++++++++++++++++++++-----------
 src/components/MenuMobile.vue  |  42 +++++++-----
 src/components/Preferences.vue |  13 ++++
 src/locales/en.json            |   3 +-
 src/store.js                   |  10 +++
 6 files changed, 133 insertions(+), 64 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1d0bd1f5..7133aa0c 100644
--- a/src/App.vue
+++ b/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")) {
diff --git a/src/components/MenuDesktop.vue b/src/components/MenuDesktop.vue
index 67d1d9cc..889c0548 100644
--- a/src/components/MenuDesktop.vue
+++ b/src/components/MenuDesktop.vue
@@ -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>
diff --git a/src/components/MenuMobile.vue b/src/components/MenuMobile.vue
index e8d75929..5b1eb9f9 100644
--- a/src/components/MenuMobile.vue
+++ b/src/components/MenuMobile.vue
@@ -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>
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index 12ce50eb..cd942457 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -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();
             }
diff --git a/src/locales/en.json b/src/locales/en.json
index 69c12d6a..c6fd891f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -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",
diff --git a/src/store.js b/src/store.js
index a24600dc..51ca7bbd 100644
--- a/src/store.js
+++ b/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;
+        },
+    };
+}