@asd20/ui 3.2.942 → 3.2.944

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.942",
+  "version": "3.2.944",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue

@@ -15,7 +15,9 @@
     >
       <video
         v-if="videoUrl"
+        ref="backgroundVideo"
         class="background-video"
+        role="presentation"
         aria-hidden="true"
         autoplay
         loop
@@ -26,6 +28,17 @@
       >
         <source :src="videoUrl" type="video/mp4" />
       </video>
+      <button
+        v-if="videoUrl"
+        class="video-toggle-btn"
+        @click="toggleVideo"
+        :aria-label="isPaused ? 'Play video' : 'Pause video'"
+      >
+        <!-- Play icon (▶) -->
+        <span v-if="isPaused">&#9658;</span>
+        <!-- Pause icon (⏸) -->
+        <span v-else>&#10073;&#10073;</span>
+      </button>
       <img
         :class="videoUrl ? 'hide-background-image' : 'background-image'"
         :src="imageUrl"
@@ -91,6 +104,11 @@ export default {
     primaryMessages: { type: Array, default: () => [] },
     secondaryMessages: { type: Array, default: () => [] },
   },
+  data() {
+    return {
+      isPaused: false,
+    }
+  },
   computed: {
     mq() {
       return this.$mq || 'sm'
@@ -111,6 +129,20 @@ export default {
       )
     },
   },
+  methods: {
+    toggleVideo() {
+      const video = this.$refs.backgroundVideo
+      if (video) {
+        if (video.paused) {
+          video.play()
+          this.isPaused = false
+        } else {
+          video.pause()
+          this.isPaused = true
+        }
+      }
+    },
+  },
 }
 </script>
 
@@ -272,7 +304,12 @@ export default {
         );
         ::before {
           width: 25px; /* Arrow grows on hover */
-          background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
+          background-color: rgba(
+            255,
+            255,
+            255,
+            0.3
+          ); /* Darker arrow on hover */
           z-index: 0;
         }
       }
@@ -473,7 +510,7 @@ $max: 4rem;
       width: 60%;
       min-width: space(15);
       height: min-content;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(0, 0, 0, 0.6);
       padding: space(1);
       border-radius: var(--website-shape__radius-m);
       border-left: space(0.5) solid var(--color__accent);
@@ -621,7 +658,7 @@ $max: 4rem;
       width: 30%;
       min-width: space(15);
       height: min-content;
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(0, 0, 0, 0.6);
       padding: space(1);
       border-radius: var(--website-shape__radius-m);
       border-left: space(0.5) solid var(--color__accent);
@@ -682,5 +719,30 @@ $max: 4rem;
       display: block;
     }
   }
+  .video-toggle-btn {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: lightgray;
+    border: none;
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .video-toggle-btn:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .video-toggle-btn span {
+    line-height: 1;
+  }
 }
 </style>

package/src/components/organisms/Asd20VideoHeader/index.vue

@@ -11,7 +11,9 @@
 
     <video
       v-if="videoUrl"
+      ref="backgroundVideo"
       class="background-video"
+      role="presentation"
       aria-hidden="true"
       autoplay
       loop
@@ -22,6 +24,17 @@
     >
       <source :src="videoUrl" type="video/mp4" />
     </video>
+    <button
+      v-if="videoUrl"
+      class="video-toggle-btn"
+      @click="toggleVideo"
+      :aria-label="isPaused ? 'Play video' : 'Pause video'"
+    >
+      <!-- Play icon (▶) -->
+      <span v-if="isPaused">&#9658;</span>
+      <!-- Pause icon (⏸) -->
+      <span v-else>&#10073;&#10073;</span>
+    </button>
 
     <img
       :class="videoUrl ? 'hide-background-image' : 'background-image'"
@@ -54,6 +67,11 @@ export default {
     primaryMessages: { type: Array, default: () => [] },
     secondaryMessages: { type: Array, default: () => [] },
   },
+  data() {
+    return {
+      isPaused: false,
+    }
+  },
   computed: {
     mq() {
       return this.$mq || 'sm'
@@ -72,6 +90,20 @@ export default {
       )
     },
   },
+  methods: {
+    toggleVideo() {
+      const video = this.$refs.backgroundVideo
+      if (video) {
+        if (video.paused) {
+          video.play()
+          this.isPaused = false
+        } else {
+          video.pause()
+          this.isPaused = true
+        }
+      }
+    },
+  },
 }
 </script>
 
@@ -281,5 +313,30 @@ export default {
       display: block;
     }
   }
+  .video-toggle-btn {
+    position: absolute;
+    bottom: 2rem;
+    right: 0.5rem;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: lightgray;
+    border: none;
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .video-toggle-btn:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .video-toggle-btn span {
+    line-height: 1;
+  }
 }
 </style>