[Android] Remote access: manage click on main icon

[Nicolas Pomepuy]

vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Fri Mar  1 10:29:19 2024 +0100| [8400d810271a2566e3e89fd30ebdca801a2ef0c2] | committer: Duncan McNamara

Remote access: manage click on main icon

> https://code.videolan.org/videolan/vlc-android/commit/8400d810271a2566e3e89fd30ebdca801a2ef0c2
---

 .../src/components/AppHeader.vue                   | 107 ++++++++++++++++++++-
 1 file changed, 105 insertions(+), 2 deletions(-)

diff --git a/buildsystem/network-sharing-server/src/components/AppHeader.vue b/buildsystem/network-sharing-server/src/components/AppHeader.vue
index a8341758fe..32e2687495 100644
--- a/buildsystem/network-sharing-server/src/components/AppHeader.vue
+++ b/buildsystem/network-sharing-server/src/components/AppHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <nav class="navbar navbar-light navbar-expand-md shadow-sm sticky-top align-items-center container-fluid main-navbar">
     <RouterLink class="flex1" :to="{ name: 'VideoList' }">
-      <img id="logo" v-bind:src="$getAppAsset('ic_icon', 48, true)" width="48">
+      <img id="logo" v-bind:src="$getAppAsset('ic_icon', 48, true)" width="48" v-on:click="iconClick()" v-bind:class="this.clicked > 2 && this.clicked % 2 == 1 ? 'animate' : ''">
     </RouterLink>
     <div class="d-flex justify-content-center">
       <RouterLink :to="{ name: 'VideoList' }">
@@ -145,6 +145,11 @@ export default {
   components: {
     ImageButton,
   },
+  data() {
+        return {
+            clicked: 0
+        }
+    },
   methods: {
     disconnectedClicked() {
       this.$root.startWebSocket();
@@ -167,6 +172,9 @@ export default {
     },
     changeTheme () {
       this.appStore.darkTheme = !this.appStore.darkTheme
+    },
+    iconClick() {
+      this.clicked++
     }
   },
   computed: {
@@ -241,4 +249,99 @@ export default {
 
 .cursor-pointer {
   cursor: pointer;
-}</style>
\ No newline at end of file
+}
+
+.animate {
+  animation-name: rotating, bounce, jello;
+  animation-duration: 1000ms, 1000ms, 1000ms;
+  animation-delay: 0ms, 1000ms, 1000ms;
+
+}
+
+ at keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg) translateY(-23px);
+    
+  }
+}
+
+ at keyframes bounce {
+	0% {
+		animation-timing-function: ease-in;
+		opacity: 1;
+		transform: translateY(-23px);
+	}
+
+	24% {
+		opacity: 1;
+	}
+
+	40% {
+		animation-timing-function: ease-in;
+		transform: translateY(-12px);
+	}
+
+	65% {
+		animation-timing-function: ease-in;
+		transform: translateY(-6px);
+	}
+
+	82% {
+		animation-timing-function: ease-in;
+		transform: translateY(-3px);
+	}
+
+	93% {
+		animation-timing-function: ease-in;
+		transform: translateY(-2px);
+	}
+
+	25%,
+	55%,
+	75%,
+	87% {
+		animation-timing-function: ease-out;
+		transform: translateY(0px);
+	}
+
+	100% {
+		animation-timing-function: ease-out;
+		opacity: 1;
+		transform: translateY(0px);
+	}
+}
+
+ at keyframes jello {
+	0% {
+		transform: scale3d(1, 1, 1);
+	}
+
+	30% {
+		transform: scale3d(1.1, 0.9, 1);
+	}
+
+	40% {
+		transform: scale3d(0.9, 1.1, 1);
+	}
+
+	50% {
+		transform: scale3d(1.05, 0.95, 1);
+	}
+
+	65% {
+		transform: scale3d(0.98, 1.02, 1);
+	}
+
+	75% {
+		transform: scale3d(1.02, 0.98, 1);
+	}
+
+	100% {
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+</style>
\ No newline at end of file