@worksafevictoria/wcl7.5 1.0.0 → 1.1.0-beta.1

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

@@ -15,45 +15,37 @@
         />
       </div>
     </a>
-    <b-modal
-      :id="`wcl-video-modal`"
-      v-model="showModal"
-      scrollable
-      class="wcl-video-modal__modal"
-    >
-      <template #modal-header="{ close }">
-        <div class="modal-header__wrap">
-          <!-- Emulate built in modal header close button action -->
-          <a
-            href="#"
-            class="close-button"
-            :class="{ rtl: video.rtl }"
-            @click.prevent="close()"
-          >
-            <icon-close :src="IconClose" alt="close icon" class="close-icon" />
-          </a>
+    <!-- Modal -->
+    <div v-if="showModal" :id="wcl-video-modal" class="modal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
+      <div class="modal-dialog modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="btn-close" @click="showModal = !showModal" aria-label="close"></button>
+          </div>
+          <div class="modal-body">
+            <div class="wcl-video-modal__video">
+              <video-media
+                :media-title="video.mediaTitle"
+                :media-description="video.mediaDescription"
+                :video-id="video.id"
+                :provider="video.provider"
+                :transcript="video.transcript"
+                :transcript-title="video.transcriptTitle"
+                :fix-width="video.fixWidth"
+                :rtl="video.rtl"
+              />
+            </div>
+          </div>
         </div>
-      </template>
-      <div class="wcl-video-modal__video">
-        <video-media
-          :media-title="video.mediaTitle"
-          :media-description="video.mediaDescription"
-          :video-id="video.id"
-          :provider="video.provider"
-          :transcript="video.transcript"
-          :transcript-title="video.transcriptTitle"
-          :fix-width="video.fixWidth"
-          :rtl="video.rtl"
-        />
       </div>
-    </b-modal>
+    </div>
   </div>
 </template>
 
 <script>
 import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
-import VideoPlay from './../../../assets/icons/video-play.svg'
-import IconClose from './../../../assets/icons/icon-close.svg'
+import VideoPlay from './../../../assets/icons/video-play.svg?url'
+import IconClose from './../../../assets/icons/icon-close.svg?url'
 
 export default {
   name: 'VideoThumbnail',
@@ -112,83 +104,88 @@ export default {
 <style lang="scss">
 @import '../../../includes/scss/all';
 // The modal styling
-#wcl-video-modal {
-  .modal-dialog {
-    max-width: 1110px;
-    @media only screen and (max-width: 1150px) {
-      margin: {
-        left: 15px;
-        right: 15px;
-        top: 15px;
-      }
-    }
+  .modal {
+  background: rgba(0,0,0,0.5)
+}
 
-    .modal-content {
-      position: relative;
-      border-radius: 8px;
+.modal-backdrop {
+  display: none;
+}
+.modal-dialog {
+  max-width: 1110px;
+  @media only screen and (max-width: 1150px) {
+    margin: {
+      left: 15px;
+      right: 15px;
+      top: 15px;
     }
+  }
 
-    .modal-header {
-      position: absolute;
-      top: 0;
-      height: 45px;
-      background: $white;
-      z-index: 1;
-      width: 100%;
+  .modal-content {
+    position: relative;
+    border-radius: 8px;
+  }
 
-      &__wrap {
-        position: relative;
-        width: 100%;
-        a {
-          position: absolute;
-          right: 0;
-          z-index: 1;
-          &.rtl {
-            right: auto;
-            left: 0;
-          }
-          svg {
-            fill: $black;
-          }
+  .modal-header {
+    position: absolute;
+    top: 0;
+    height: 45px;
+    background: $white;
+    z-index: 1;
+    width: 100%;
+
+    &__wrap {
+      position: relative;
+      width: 100%;
+      a {
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        &.rtl {
+          right: auto;
+          left: 0;
+        }
+        svg {
+          fill: $black;
         }
       }
     }
-    .modal-body {
-      padding: 32px;
-      margin-top: 16px;
-      .video-player {
-        @include fp(min-height, 250, 588);
-      }
+  }
+  .modal-body {
+    padding: 32px;
+    margin-top: 16px;
+    .video-player {
+      @include fp(min-height, 250, 588);
+    }
 
-      .paragraph--video-media {
-        margin: 0;
-        .container {
-          padding: 0;
-          width: 100%;
-        }
-        h3 {
-          margin: 0;
-          font-style: normal;
-          font-weight: bold;
-          font-size: 28px;
-          line-height: 32px;
-          margin-bottom: 16px;
-          display: inline-block;
-          width: 98%;
-        }
+    .paragraph--video-media {
+      margin: 0;
+      .container {
+        padding: 0;
+        width: 100%;
       }
-      .section-group__block {
-        max-width: 100%;
+      h3 {
+        margin: 0;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 28px;
+        line-height: 32px;
+        margin-bottom: 16px;
+        display: inline-block;
+        width: 98%;
       }
     }
-    .modal-header,
-    .modal-footer {
-      border: none;
-    }
-    .modal-footer {
-      display: none;
+    .section-group__block {
+      max-width: 100%;
     }
   }
+  .modal-header,
+  .modal-footer {
+    border: none;
+  }
+  .modal-footer {
+    display: none;
+  }
 }
 </style>
 <style lang="scss" scoped>

package/vite.config.js

@@ -14,6 +14,10 @@ export default defineConfig({
     }
   },
   define: {
-    'process.env.SOME_ENV': `"${process.env.SOME_ENV}"`
+    'process.env.SHOW_COOKIE': `"${process.env.SHOW_COOKIE}"`,
+    'process.env.CONTENT_API_URL': `"${process.env.CONTENT_API_URL}"`,
+    'process.env.IS_STORYBOOK': `"${process.env.IS_STORYBOOK}"`,
+    'process.env.CARETAKER': `"${process.env.CARETAKER}"`,
+    'process.env.SHOW_GLOBAL_NOTICE': `"${process.env.SHOW_GLOBAL_NOTICE}"`
   }
 })