@worksafevictoria/wcl7.5 1.14.0-beta.7 → 1.14.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.14.0-beta.7",
+  "version": "1.14.0-beta.8",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/assets/icons/icon-view-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140.743" height="128.766" viewBox="0 0 140.743 128.766"><g transform="translate(0 0)"><path d="M5.986,128.766A5.986,5.986,0,0,1,.45,120.507a.323.323,0,0,1,.083-.056.35.35,0,0,0,.073-.046L117.334,3.677a4.454,4.454,0,0,0,1.036-1.742l.107-.108a5.986,5.986,0,1,1,8.465,8.465L103,34.206a125.465,125.465,0,0,1,25.74,21.55,12.981,12.981,0,0,1,.042,17.348A125.8,125.8,0,0,1,115.556,85.64a118.682,118.682,0,0,1-16.05,11.144,90.43,90.43,0,0,1-17.951,7.984,63.583,63.583,0,0,1-18.927,3.054h-1.8a67.061,67.061,0,0,1-25.8-5.62L10.213,127.02A5.951,5.951,0,0,1,5.986,128.766Zm78.962-75.9a1.515,1.515,0,0,0-1.076.452L50.589,86.6A1.514,1.514,0,0,0,51,89.032,25.738,25.738,0,0,0,69.553,90.17,27.416,27.416,0,0,0,87.511,72.044a25.711,25.711,0,0,0-1.2-18.323,1.51,1.51,0,0,0-1.36-.854Z" transform="translate(8.661 0)" fill="#fff"/><path d="M44.106,51.784a1.461,1.461,0,0,0,.365-1.437A25.83,25.83,0,0,1,43.417,43.4,26.937,26.937,0,0,1,70.355,16.467,25.6,25.6,0,0,1,77.3,17.5a1.461,1.461,0,0,0,1.437-.371L90.354,5.506a1.52,1.52,0,0,0-.6-2.52A62.333,62.333,0,0,0,70.355,0C44.615-.342,18.874,17.664,3.388,34.718a12.87,12.87,0,0,0-.042,17.36,126.959,126.959,0,0,0,20.58,18.138,1.532,1.532,0,0,0,1.951-.174Z" transform="translate(0 21.038)" fill="#fff"/></g></svg>

package/src/components/Paragraphs/VideoPlayer/index.vue

@@ -9,19 +9,67 @@
       :size="fixWidth ? 'content' : 'page'"
       @isMobileOrTabletView="(e) => (isMobileOrTabletView = e)"
     >
-      <div>
-        <video-player
-          :provider="provider"
-          :video-id="videoId"
-          class="video-media__video-player"
-          :rtl="rtl"
-        />
-      </div>
+      <BOverlay
+        v-model:show="show"
+        no-center
+        variant="dark"
+        opacity="1"
+        @shown="onShown"
+        @hidden="onHidden"
+      >
+        <div>
+          <video-player
+            :provider="provider"
+            :video-id="videoId"
+            class="video-media__video-player"
+            :rtl="rtl"
+          />
+        </div>
+
+        <!-- video overlay slot... -->
+        <template #overlay>
+          <div class="wcl-video-modal__overlay" role="dialog" aria-modal="true">
+            <div class="wcl-video-modal__panel">
+              <img
+                class="icon"
+                :src="IconView"
+                alt="Icon View"
+                aria-hidden="true"
+              />
+              <h2 class="title">
+                {{ mediaAlertTitle }}
+              </h2>
+              <p class="description">
+                {{ mediaAlertDescription }}
+              </p>
+              <CtaButton
+                text-only="true"
+                aria-describedby="gethelp-label"
+                :url="mediaAlertUrl"
+              >
+                Get help
+              </CtaButton>
+              <CtaButton
+                type="gray"
+                text-only="true"
+                aria-describedby="seevideo-label"
+                @click="onSeeVideo"
+              >
+                See video
+              </CtaButton>
+            </div>
+          </div>
+        </template>
+      </BOverlay>
     </section-group>
+
+    <!-- Only visible when overlay is NOT visible -->
     <accordion
+      v-show="!show"
       :accordion-list="accordion"
       :option="'close-all'"
       class="video-media__transcript"
+      :aria-hidden="show ? 'true' : null"
     />
   </div>
 </template>
@@ -30,64 +78,101 @@
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
 import VideoPlayer from '../../SubComponents/MediaPlayer/index.vue'
 import Accordion from '../Accordion/index.vue'
+import IconView from './../../../assets/icons/icon-view-off.svg?url'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
 
 export default {
   name: 'VideoMedia',
   components: {
+    CtaButton,
     VideoPlayer,
     SectionGroup,
-    Accordion
+    Accordion,
+    IconView,
   },
   props: {
     mediaTitle: {
       type: String,
-      default: null
+      default: null,
     },
     mediaDescription: {
       type: String,
-      default: null
+      default: null,
     },
     provider: {
       type: String,
-      required: true
+      required: true,
     },
     videoId: {
       type: String,
-      required: true
+      required: true,
     },
     transcriptTitle: {
       type: String,
-      default: null
+      default: null,
     },
     transcript: {
       type: String,
-      default: null
+      default: null,
     },
     fixWidth: {
       type: Boolean,
-      default: false
+      default: false,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
+    },
+    mediaAlert: {
+      type: Boolean,
+      default: false,
+    },
+    mediaAlertTitle: {
+      type: String,
+      default: null,
+    },
+    mediaAlertDescription: {
+      type: String,
+      default: null,
+    },
+    mediaAlertUrl: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      IconView,
+      show: this.mediaAlert,
     }
   },
+  watch: {
+    mediaAlert(v) {
+      this.show = v
+    },
+  },
   computed: {
     accordion() {
       return [
         {
           field_title: this.transcriptTitle,
           field_rich_text: {
-            value: this.transcript
-          }
-        }
+            value: this.transcript,
+          },
+        },
       ]
-    }
-  }
+    },
+  },
+  methods: {
+    onSeeVideo() {
+      this.show = false
+      this.$emit('update:alert', false) // or emit nothing if parent doesn't care
+    },
+  },
 }
 </script>
 
@@ -106,5 +191,50 @@ export default {
   :deep(.section-group--size-page .video-player) {
     @include fp(min-height, 250, 625);
   }
+
+  /* Center *within the wrapper*, not the window */
+  .wcl-video-modal {
+    &__overlay {
+      position: absolute; /* absolute to .b-overlay-wrap */
+      inset: 0; /* fill the wrapper */
+      z-index: 10; /* above the video */
+      display: grid; /* simple centering */
+      place-items: center; /* vertical + horizontal center */
+      padding: 1rem;
+      text-align: center;
+      /* Optional dim */
+      background: rgba(0, 0, 0, 0.6);
+      overflow: auto; /* scroll if content taller than video area */
+    }
+
+    /* The centered card */
+    &__panel {
+      color: white;
+      width: min(756px, 100%);
+      border-radius: 12px;
+      // padding: 1.25rem 1.5rem;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+
+      /* Tidy content */
+      img {
+        width: 110px;
+        margin-bottom: 30px;
+      }
+      .title {
+        font-size: 39px;
+        font-weight: 700;
+        margin-bottom: 24px;
+      }
+      .description {
+        font-size: 24px;
+        font-weight: 400;
+        text-align: left;
+        margin-bottom: 30px;
+      }
+      .wcl-cta {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 </style>

package/src/components/SubComponents/VideoThumbnail/index.vue

@@ -27,19 +27,11 @@
       size="xl"
     >
       <div class="wcl-video-modal__video">
-        <p class="visually-hidden">
-          video.triggerWarning = {{ video.alertStrip }} <br />
-          video.triggerWarningContent = {{ video.alertStripDesc }} <br />
-          video.triggerWarningTitle :- {{ video.alertStripTitle }} <br />
-          video.triggerWarningUrl :- {{ video.alertStripUrl }} <br />
-        </p>
-        <AlertStrip
-          v-if="video.alertStrip"
-          :is-warning="true"
-          :desc="video.alertStripDesc"
-          :url="video.alertStripUrl"
-        />
         <video-media
+          :media-alert="video.alertStrip"
+          :media-alert-title="video.alertStripTitle"
+          :media-alert-description="video.alertStripDesc"
+          :media-alert-url="video.alertStripUrl"
           :media-title="video.mediaTitle"
           :media-description="video.mediaDescription"
           :video-id="video.id"
@@ -48,15 +40,14 @@
           :transcript-title="video.transcriptTitle"
           :fix-width="video.fixWidth"
           :rtl="video.rtl"
+          :aria-hidden="video.alertStrip ? 'true' : null"
         />
       </div>
       <template #footer><div></div></template>
     </BModal>
   </div>
 </template>
-
 <script>
-import AlertStrip from './../../Global/AlertStrip/index.vue'
 import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
 import VideoPlay from './../../../assets/icons/video-play.svg?url'
 import IconClose from './../../../assets/icons/icon-close.svg?url'
@@ -66,7 +57,6 @@ import axios from 'axios'
 export default {
   name: 'VideoThumbnail',
   components: {
-    AlertStrip,
     VideoMedia,
     IconClose,
     'b-modal': BModal,