@asd20/ui 3.2.967 → 3.2.969

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue +17 -8
  3. package/src/components/organisms/Asd20VideoHeader/index.vue +15 -29
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "*.scss",
6
6
  "*.vue"
7
7
  ],
8
- "version": "3.2.967",
8
+ "version": "3.2.969",
9
9
  "private": false,
10
10
  "license": "MIT",
11
11
  "repository": {
package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue CHANGED
@@ -14,19 +14,26 @@
14
14
  class="asd20-school-homepage-video-header__image"
15
15
  >
16
16
  <video
17
+ v-if="loadVideo"
17
18
  ref="backgroundVideo"
18
19
  class="background-video"
19
20
  role="presentation"
20
21
  aria-hidden="true"
22
+ tabindex="-1"
21
23
  autoplay
22
24
  loop
23
- autobuffer
24
25
  muted
25
26
  playsinline
26
27
  :poster="imageUrl"
27
28
  >
28
- <source :src="loadVideo" type="video/mp4" />
29
+ <source aria-hidden="true" :src="loadVideo" type="video/mp4" />
29
30
  </video>
31
+ <img
32
+ v-else
33
+ class="background-image"
34
+ :src="imageUrl"
35
+ :alt="imageCaption"
36
+ />
30
37
  <button
31
38
  v-if="videoUrl"
32
39
  class="video-toggle-btn"
@@ -38,11 +45,6 @@
38
45
  <!-- Pause icon (⏸) -->
39
46
  <span v-else>&#10073;&#10073;</span>
40
47
  </button>
41
- <img
42
- :class="videoUrl ? 'hide-background-image' : 'background-image'"
43
- :src="imageUrl"
44
- :alt="imageCaption"
45
- />
46
48
  <div id="main" class="asd20-school-homepage-video-header__content">
47
49
  <h1 v-if="heading" v-html="heading" />
48
50
  <div v-if="lead" class="asd20-school-homepage-video-header__lead">
@@ -110,7 +112,11 @@ export default {
110
112
  }
111
113
  },
112
114
  mounted() {
113
- this.isMobile = this.$mq === 'xs' || this.$mq === 'sm'
115
+ this.checkIsMobile()
116
+ window.addEventListener('resize', this.checkIsMobile)
117
+ },
118
+ beforeDestroy() {
119
+ window.removeEventListener('resize', this.checkIsMobile)
114
120
  },
115
121
  computed: {
116
122
  mq() {
@@ -139,6 +145,9 @@ export default {
139
145
  },
140
146
  },
141
147
  methods: {
148
+ checkIsMobile() {
149
+ this.isMobile = window.innerWidth <= 1024
150
+ },
142
151
  toggleVideo() {
143
152
  const video = this.$refs.backgroundVideo
144
153
  if (video) {
package/src/components/organisms/Asd20VideoHeader/index.vue CHANGED
@@ -10,36 +10,34 @@
10
10
  </div>
11
11
 
12
12
  <video
13
+ v-if="loadVideo"
13
14
  ref="backgroundVideo"
14
15
  class="background-video"
15
16
  role="presentation"
16
17
  aria-hidden="true"
18
+ tabindex="-1"
17
19
  autoplay
18
20
  loop
19
- autobuffer
20
21
  muted
21
22
  playsinline
22
23
  :poster="imageUrl"
23
24
  >
24
- <source :src="loadVideo" type="video/mp4" />
25
+ <source aria-hidden="true" :src="loadVideo" type="video/mp4" />
25
26
  </video>
27
+ <img v-else class="background-image" :src="imageUrl" :alt="imageCaption" />
26
28
  <button
27
29
  v-if="videoUrl"
28
30
  class="video-toggle-btn"
29
31
  @click="toggleVideo"
30
- :aria-label="isPaused ? 'Play video' : 'Pause video'"
32
+ :aria-label="
33
+ isPaused ? 'Play background video' : 'Pause background video'
34
+ "
31
35
  >
32
36
  <!-- Play icon (▶) -->
33
37
  <span v-if="isPaused">&#9658;</span>
34
38
  <!-- Pause icon (⏸) -->
35
39
  <span v-else>&#10073;&#10073;</span>
36
40
  </button>
37
-
38
- <img
39
- :class="videoUrl ? 'hide-background-image' : 'background-image'"
40
- :src="imageUrl"
41
- :alt="imageCaption"
42
- />
43
41
  <!-- <div class="scroll-down-indicator"></div> -->
44
42
  <slot />
45
43
  </header>
@@ -73,7 +71,11 @@ export default {
73
71
  }
74
72
  },
75
73
  mounted() {
76
- this.isMobile = this.$mq === 'xs' || this.$mq === 'sm'
74
+ this.checkIsMobile()
75
+ window.addEventListener('resize', this.checkIsMobile)
76
+ },
77
+ beforeDestroy() {
78
+ window.removeEventListener('resize', this.checkIsMobile)
77
79
  },
78
80
  computed: {
79
81
  mq() {
@@ -100,6 +102,9 @@ export default {
100
102
  },
101
103
  },
102
104
  methods: {
105
+ checkIsMobile() {
106
+ this.isMobile = window.innerWidth <= 1024
107
+ },
103
108
  toggleVideo() {
104
109
  const video = this.$refs.backgroundVideo
105
110
  if (video) {
@@ -130,11 +135,6 @@ export default {
130
135
  .background-video {
131
136
  display: none;
132
137
  }
133
- .hide-background-image {
134
- display: block;
135
- width: 100%;
136
- order: 2;
137
- }
138
138
  .background-image {
139
139
  display: block;
140
140
  // position: absolute;
@@ -241,14 +241,6 @@ export default {
241
241
  }
242
242
  }
243
243
 
244
- @media (min-width: 600px) {
245
- .asd20-video-header {
246
- .hide-background-image {
247
- order: 2;
248
- }
249
- }
250
- }
251
-
252
244
  @media (min-width: 768px) {
253
245
  .asd20-video-header {
254
246
  &__top {
@@ -258,9 +250,6 @@ export default {
258
250
  .background-image {
259
251
  order: 0;
260
252
  }
261
- .hide-background-image {
262
- order: 0;
263
- }
264
253
  }
265
254
  }
266
255
 
@@ -295,9 +284,6 @@ export default {
295
284
  height: 100vh;
296
285
  object-fit: cover;
297
286
  }
298
- .hide-background-image {
299
- display: none;
300
- }
301
287
 
302
288
  video {
303
289
  z-index: -1;