barbican-reset 2.16.0 → 2.16.2

package/components/video_content.vue

@@ -1,16 +1,11 @@
 <template>
 
   <div>
-
-    <fluid-iframe v-if="data.type === 'jwplayer'" :src="data.url" />
-
-    <template v-if="data.type === 'brightcove'">
-
-      <div v-html="data.markup" :class="$style.brightcove"></div>
-
-      <br-alert v-if="data.isExpired" error center inline>Event has passed.</br-alert>
-
-    </template>
+    <br-alert v-if="data.isExpired" error center inline>Event has passed.</br-alert>
+    <br-alert v-if="data.status === 'not_found'" error center inline>That video cannot be found.</br-alert>
+    <div v-if="shouldPlayVideo">
+      <video ref="videoPlayer" class="video-js margin-bottom-2"></video>
+    </div>
 
     <h2 v-html="data.title" class="margin-bottom-1"></h2>
 
@@ -22,9 +17,9 @@
 
     </template>
 
-    <template v-if="data.expires">
+    <template v-if="data.expiry">
 
-      <p>Until {{ formatDateTime(data.expires) }}</p>
+      <p>Until {{ formatDateTime(data.expiry) }}</p>
 
     </template>
 
@@ -34,48 +29,70 @@
 
     </template>
 
-  </div>  
+  </div>
 
 </template>
 
 <script>
-import { FluidIframe } from 'barbican-reset'
 import BrAlert from './br_alert'
 import { DateTime } from 'luxon';
+import videojs from "video.js";
+require('@silvermine/videojs-airplay')(videojs);
 
 export default {
   props: {
     data: {
       type: Object
     },
-    concert: {
-      type: Boolean,
-      default: false,
+  },
+  data() {
+    return {
+      videoJsPlayer: null
     }
   },
-  created() {
-    if (this.concert) {
-      this.data.expires = this.data.brightcove.expires;
-      this.data.markup = this.data.brightcove.markup;
-      this.data.script = this.data.brightcove.script;
-      this.data.isExpired = this.data.brightcove.isExpired;
+  computed: {
+    shouldPlayVideo() {
+      if (this.data.source) {
+        return true;
+      }
+      return false;
     }
   },
-  components: { FluidIframe, BrAlert },
+  mounted() {
+    if (this.shouldPlayVideo) {
+      let options = {
+        controls: true,
+        fluid: true,
+        sources: [
+          {
+            src: this.data.source,
+            type: 'application/x-mpegURL'
+          }
+        ],
+        plugins: {
+          airPlay: {
+            addButtonToControlBar: true
+          }
+        }
+      }
+      this.$nextTick(() => {
+        this.player = videojs(this.$refs.videoPlayer, options, () => {
+          this.player.log('onPlayerReady', this);
+          console.log('player loaded', options);
+        });
+      })
+    }
+  },
+  components: { BrAlert },
   methods: {
     formatDateTime(date) {
       return DateTime.fromISO(date).toFormat('h:mm a ccc d LLL yyyy');
     }
+  },
+  beforeDestroy() {
+    if (this.videoJsPlayer) {
+      this.videoJsPlayer.dispose();
+    }
   }
 }
 </script>
-
-<style lang="scss" module>
-
-.brightcove {
-  border-radius: $border-radius-lg;
-  margin-bottom: 2rem;
-  overflow: hidden;
-}
-
-</style>

package/package.json

@@ -3,6 +3,7 @@
     "name": "Paul Heading"
   },
   "dependencies": {
+    "@silvermine/videojs-airplay": "^1.3.0",
     "bootstrap-vue": "^2.21.2",
     "express": "^4.18.1",
     "focus-visible": "^5.2.0",
@@ -21,6 +22,7 @@
     "pug": "^3.0.2",
     "sass": "^1.41.0",
     "save-dev": "^0.0.1-security",
+    "video.js": "^8.6.1",
     "vue-slick-carousel": "^1.0.6"
   },
   "devDependencies": {
@@ -54,5 +56,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.16.0"
+  "version": "2.16.2"
 }

package/scss/index.scss

@@ -2,6 +2,7 @@
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 @import "../helpers/index";
+@import "node_modules/video.js/src/css/video-js";
 
 @import "app";
 @import "header";