fix: disable flip animation on radio down-vote (flicker)

digris · Jan 9, 2023 · 40517c3 · 40517c3
1 parent c0e4846
commit 40517c3
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 12 deletions.
diff --git a/docs/gcp/03-http-image-resizer.md b/docs/gcp/03-http-image-resizer.md
@@ -45,5 +45,6 @@ gcloud functions deploy \
   --source ./functions/http-image-resizer/ \
   --set-env-vars SOURCE=gs://ch-openbroadcast-media \
   --allow-unauthenticated \
+  --memory 1024MB \
   --trigger-http
 ```
diff --git a/src/app-bridge/appBridge.ts b/src/app-bridge/appBridge.ts
@@ -7,14 +7,21 @@ import { useQueueStore } from "@/stores/queue";
 import { useSettingsStore } from "@/stores/settings";
 // import { useScheduleStore } from "@/stores/schedule";
 
+// how often the web-app sends a heartbeat to swift-app
 const HEARTBEAT_INTERVAL = 1000;
 
+// configuration for swift-app
+const HEARTBEAT_APP_ACTIVE_DELAY = 1.0;
+const HEARTBEAT_APP_FOREGROUND_DELAY = 1.0;
+const HEARTBEAT_HEARTBEAT_DELAY = 1.0;
+
 // for channel options see:
 // obr-app/obrapp/modules/OBRWebView.swift
 
 // channels SENDING data TO swift-app
 type sendChannel =
   | "heartbeat"
+  | "heartbeat:setDelays"
   | "heartbeat:shutdown"
   | "global:init"
   // queue
@@ -81,6 +88,8 @@ type ReceivedEvent = Event & {
 };
 
 class AppBridge {
+  pauseHeartbeat = (): void => {};
+
   constructor() {
     const { isWeb } = useDevice();
     if (isWeb) {
@@ -91,18 +100,29 @@ class AppBridge {
     this.init().then(() => {
       log.debug("AppBridge - initialized");
     });
-    useIntervalFn(
+    const { pause: pauseHeartbeat } = useIntervalFn(
       async () => {
         await this.heartbeat();
       },
       HEARTBEAT_INTERVAL,
       { immediateCallback: true }
     );
+    this.pauseHeartbeat = async () => {
+      log.debug("AppBridge - pauseHeartbeat");
+      pauseHeartbeat();
+      await this.send("heartbeat:shutdown");
+    };
     window.addEventListener("appBridge", this.onReceive.bind(this));
   }
   async init(): Promise<void> {
     log.debug("AppBridge - init");
     await this.send("global:init");
+    const delays = {
+      appActiveDelay: HEARTBEAT_APP_ACTIVE_DELAY,
+      appForegroundDelay: HEARTBEAT_APP_FOREGROUND_DELAY,
+      heartbeatDelay: HEARTBEAT_HEARTBEAT_DELAY,
+    };
+    await this.send("heartbeat:setDelays", delays);
   }
   async heartbeat(): Promise<void> {
     // log.debug("AppBridge - heartbeat");
@@ -169,6 +189,7 @@ class AppBridge {
         break;
       }
       case "schedule:update": {
+        console.debug("schedule", data.schedule);
         // const { setSchedule } = useScheduleStore();
         // await setSchedule(data.schedule);
         break;

diff --git a/src/components/account/auth/SocialLogin.vue b/src/components/account/auth/SocialLogin.vue
@@ -66,7 +66,7 @@ export default defineComponent({
         // window.appBridge?.send("browser:navigate", {
         //   url: `${document.location.origin}${location}`,
         // });
-        await window.appBridge?.send("heartbeat:shutdown");
+        window.appBridge.pauseHeartbeat();
         setTimeout(() => {
           window.location.href = location;
         }, 200);
@@ -167,7 +167,7 @@ export default defineComponent({
       border-color: #1877f2;
     }
 
-    &:hover {
+    @include responsive.on-hover {
       border-radius: 4px;
     }
   }

diff --git a/src/components/account/settings/Social.vue b/src/components/account/settings/Social.vue
@@ -209,6 +209,7 @@ export default defineComponent({
 
       margin-left: 0.5rem;
       @include responsive.bp-medium {
+        display: none;
         margin-left: 0;
       }
     }

diff --git a/src/components/broadcast/radio/rating/Rating.vue b/src/components/broadcast/radio/rating/Rating.vue
@@ -58,6 +58,7 @@ export default defineComponent({
           showPrompt();
           await flipIcon(value);
         } else {
+          await flipIcon(value);
           await setRating(objKey.value, value);
         }
       },
@@ -143,14 +144,7 @@ export default defineComponent({
     </div>
     <div>
       <CircleButton @click="rate(rating === -1 ? null : -1)" :outlined="true">
-        <div
-          class="flip-container"
-          :class="{
-            'is-flipped': isFlipped === -1,
-          }"
-        >
-          <IconFlash :outlined="rating !== -1" color-var="--c-page-fg" />
-        </div>
+        <IconFlash :outlined="rating !== -1" color-var="--c-page-fg" />
       </CircleButton>
     </div>
     <div class="total">?</div>

diff --git a/src/components/player/mobile/Player.vue b/src/components/player/mobile/Player.vue
@@ -43,11 +43,15 @@ export default defineComponent({
     const panelVisible = ref(false);
     const hidePanel = () => (panelVisible.value = false);
     const togglePanel = () => {
-      // when both panel & queue are visible: close the queue
+      // when both panel & queue are visible: close the queue (but keep the panel)
       if (queueVisible.value && panelVisible.value) {
         hideQueue();
       } else {
         panelVisible.value = !panelVisible.value;
+        // hide queue in case panel becomes visible
+        if (panelVisible.value) {
+          hideQueue();
+        }
       }
     };
     const fgColor = computed(() => {

diff --git a/src/components/ui/panel/OverlayPanel.vue b/src/components/ui/panel/OverlayPanel.vue
@@ -90,6 +90,8 @@ export default defineComponent({
 
   @include responsive.bp-medium {
     box-shadow: 0 -4px 8px 4px rgb(0 0 0 / 10%);
+    border-top-left-radius: 28px;
+    border-top-right-radius: 28px;
   }
 
   &::-webkit-scrollbar {