Merge pull request #277 from retif/duration-bug-master

Duration bug on livestream teaser and change date library to dayjs
fivejars · Feb 25, 2021 · cecc3c6 · cecc3c6
2 parents 7a6ecdc + b46307b
commit cecc3c6
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 819 deletions.
diff --git a/js/gated-content/dist/gated-content.umd.min.js b/js/gated-content/dist/gated-content.umd.min.js
diff --git a/js/gated-content/package.json b/js/gated-content/package.json
@@ -16,8 +16,7 @@
     "bootstrap": "^4.5.3",
     "calendar-link": "^1.3.1",
     "core-js": "^3.7.0",
-    "moment": "^2.29.1",
-    "moment-duration-format": "^2.3.2",
+    "dayjs": "^1.10.4",
     "qs": "^6.9.4",
     "regenerator-runtime": "^0.13.7",
     "vue": "^2.6.12",

diff --git a/js/gated-content/src/components/event/EventTeaser.vue b/js/gated-content/src/components/event/EventTeaser.vue
@@ -50,9 +50,7 @@
 <script>
 import AddToFavorite from '@/components/AddToFavorite.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
-import moment from 'moment';
-// eslint-disable-next-line no-unused-vars
-import momentDurationFormatSetup from 'moment-duration-format';
+import dayjs from 'dayjs';
 
 export default {
   name: 'EventTeaser',
@@ -68,22 +66,28 @@ export default {
   },
   computed: {
     date() {
-      return moment(this.video.attributes.date.value).format('YYYY-MM-DD');
+      return dayjs(this.video.attributes.date.value).format('YYYY-MM-DD');
     },
     time() {
-      return moment(this.video.attributes.date.value).format('h:mm a');
+      return dayjs(this.video.attributes.date.value).format('h:mm a');
     },
     duration() {
-      return moment.duration(moment(this.video.attributes.date.value)
-        .diff(moment(this.video.attributes.date.end_value))).humanize();
+      const min = Math.floor(dayjs.duration(
+        dayjs(this.video.attributes.date.end_value) - dayjs(this.video.attributes.date.value),
+      ).asMinutes());
+
+      return `${min} ${this.$options.filters.simplePluralize('minute', min)}`;
     },
     startsIn() {
-      const duration = moment.duration(moment(this.video.attributes.date.value)
-        .diff(moment()));
-      if (duration.asHours() > 48) {
-        return duration.format('d [day]');
+      const eventStartDate = dayjs(this.video.attributes.date.value);
+      const startsDuration = dayjs.duration(eventStartDate - dayjs());
+
+      if (startsDuration.asHours() >= 48) {
+        return `${Math.floor(startsDuration.asDays())} days`;
       }
-      return duration.format('hh:mm:ss');
+
+      const { prependZero } = this.$options.filters;
+      return `${prependZero(Math.floor(startsDuration.asHours()))}:${prependZero(startsDuration.minutes())}:${prependZero(startsDuration.seconds())}`;
     },
     image() {
       if (this.video.attributes['field_ls_image.field_media_image']) {

diff --git a/js/gated-content/src/components/video/VideoTeaser.vue b/js/gated-content/src/components/video/VideoTeaser.vue
@@ -22,7 +22,8 @@
         <SvgIcon icon="difficulty-icon-white" :css-fill="false"></SvgIcon>
         {{ video.attributes.field_gc_video_level.name | capitalize }}
       </div>
-      <div class="timer">
+      <div class="timer" :style="{ visibility: this.video
+        .attributes.field_gc_video_duration ? 'visible': 'hidden'}">
         {{ duration }}
       </div>
     </router-link>
@@ -38,9 +39,7 @@
 <script>
 import AddToFavorite from '@/components/AddToFavorite.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
-import moment from 'moment';
-// eslint-disable-next-line no-unused-vars
-import momentDurationFormatSetup from 'moment-duration-format';
+import dayjs from 'dayjs';
 
 export default {
   name: 'VideoTeaser',
@@ -68,7 +67,13 @@ export default {
       return this.video.attributes['field_gc_video_media.thumbnail'].image_style_uri[0].gated_content_teaser;
     },
     duration() {
-      return moment.duration(this.video.attributes.field_gc_video_duration, 'seconds').format('m [minute]');
+      const sec = this.video.attributes.field_gc_video_duration;
+      if (sec > 0 && sec < 60) {
+        return `${sec} ${this.$options.filters.simplePluralize('second', sec)}`;
+      }
+
+      const min = Math.floor(dayjs.duration(sec, 'seconds').asMinutes());
+      return `${min} ${this.$options.filters.simplePluralize('minute', min)}`;
     },
   },
 };

diff --git a/js/gated-content/src/filters/index.js b/js/gated-content/src/filters/index.js
@@ -15,27 +15,23 @@ const filters = [
     },
   },
   {
-    name: 'schedule',
-    execute: (date) => {
-      if (!date) return '';
-
-      const dateStart = new Date(date.value);
-      const dateEnd = new Date(date.end_value);
-      const startHours = dateStart.getHours() % 12 || 12;
-      const startMinutes = (dateStart.getMinutes() < 10 ? '0' : '') + dateStart.getMinutes();
-      const startMorning = dateStart.getHours() < 12 ? 'a.m.' : 'p.m.';
-      const endHours = dateEnd.getHours() % 12 || 12;
-      const endMinutes = (dateEnd.getMinutes() < 10 ? '0' : '') + dateEnd.getMinutes();
-      const endMorning = dateEnd.getHours() < 12 ? 'a.m.' : 'p.m.';
-      const now = new Date();
-
-      let start = `${startHours}:${startMinutes} ${startMorning} - `;
+    name: 'simplePluralize',
+    execute: (singular, number) => {
+      if (parseInt(number, 10) === 1) {
+        return singular;
+      }
 
-      if (dateStart < now && now < dateEnd) {
-        start = 'Until ';
+      return `${singular}s`;
+    },
+  },
+  {
+    name: 'prependZero',
+    execute: (number) => {
+      if (number < 10) {
+        return `0${number}`;
       }
 
-      return `${start} ${endHours}:${endMinutes} ${endMorning}`;
+      return number;
     },
   },
   {

diff --git a/js/gated-content/src/main.js b/js/gated-content/src/main.js
@@ -1,6 +1,9 @@
 import Vue from 'vue';
 import { sync } from 'vuex-router-sync';
-import moment from 'moment';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import duration from 'dayjs/plugin/duration';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import dayjs from 'dayjs';
 import App from './GatedContent.vue';
 import router from './router';
 import store from './store';
@@ -19,7 +22,10 @@ filters.forEach((f) => {
   Vue.filter(f.name, f.execute);
 });
 
-moment.updateLocale('en', {
+dayjs.extend(duration);
+dayjs.extend(advancedFormat);
+dayjs.extend(updateLocale);
+dayjs.updateLocale('en', {
   meridiem(hours) {
     return hours < 12 ? 'a.m.' : 'p.m.';
   },

diff --git a/js/gated-content/src/mixins/EventMixin.js b/js/gated-content/src/mixins/EventMixin.js
@@ -1,6 +1,4 @@
-import moment from 'moment';
-// eslint-disable-next-line no-unused-vars
-import momentDurationFormatSetup from 'moment-duration-format';
+import dayjs from 'dayjs';
 
 export const EventMixin = {
   watch: {
@@ -36,22 +34,28 @@ export const EventMixin = {
       return this.$store.getters.getAppSettings;
     },
     date() {
-      return moment(this.video.attributes.date.value).format('dddd, MMMM Do, YYYY');
+      return dayjs(this.video.attributes.date.value).format('dddd, MMMM Do, YYYY');
     },
     time() {
-      return moment(this.video.attributes.date.value).format('h:mm a');
+      return dayjs(this.video.attributes.date.value).format('h:mm a');
     },
     duration() {
-      return moment.duration(moment(this.video.attributes.date.value)
-        .diff(moment(this.video.attributes.date.end_value))).humanize();
+      const min = Math.floor(dayjs.duration(
+        dayjs(this.video.attributes.date.end_value) - dayjs(this.video.attributes.date.value),
+      ).asMinutes());
+
+      return `${min} ${this.$options.filters.simplePluralize('minute', min)}`;
     },
     startsIn() {
-      const duration = moment.duration(moment(this.video.attributes.date.value)
-        .diff(moment()));
-      if (duration.asHours() > 48) {
-        return duration.format('d [day]');
+      const eventStartDate = dayjs(this.video.attributes.date.value);
+      const startsDuration = dayjs.duration(eventStartDate - dayjs());
+
+      if (startsDuration.asHours() >= 48) {
+        return `${Math.floor(startsDuration.asDays())} days`;
       }
-      return duration.format('hh:mm:ss');
+
+      const { prependZero } = this.$options.filters;
+      return `${prependZero(Math.floor(startsDuration.asHours()))}:${prependZero(startsDuration.minutes())}:${prependZero(startsDuration.seconds())}`;
     },
     isOnAir() {
       const dateStart = new Date(this.video.attributes.date.value);

diff --git a/js/gated-content/src/views/VideoPage.vue b/js/gated-content/src/views/VideoPage.vue
@@ -23,11 +23,16 @@
               :bundle="'gc_video'"
               class="rounded-border border-thunder white"
             ></AddToFavorite>
-            <div class="timer">
+            <div class="timer" :style="{ visibility: this.video
+              .attributes.field_gc_video_duration ? 'visible': 'hidden'}">
               {{ video_length }}
             </div>
           </div>
           <div class="verdana-14-12">
+            <div class="video-footer__block">
+              <SvgIcon icon="date-icon" class="fill-white" :growByHeight=false></SvgIcon>
+              {{ date }}
+            </div>
             <div
               v-if="video.attributes.field_gc_video_instructor"
               class="video-footer__block">
@@ -104,7 +109,7 @@ import MediaPlayer from '@/components/MediaPlayer.vue';
 import { JsonApiCombineMixin } from '@/mixins/JsonApiCombineMixin';
 import { SettingsMixin } from '@/mixins/SettingsMixin';
 import SvgIcon from '@/components/SvgIcon.vue';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 export default {
   name: 'VideoPage',
@@ -152,8 +157,17 @@ export default {
       }
       return this.video.relationships.field_gc_video_category.data[0].id;
     },
+    date() {
+      return dayjs(this.video.attributes.created).format('dddd, MMMM Do, YYYY');
+    },
     video_length() {
-      return moment.duration(this.video.attributes.field_gc_video_duration, 'seconds').format('m [minute]');
+      const sec = this.video.attributes.field_gc_video_duration;
+      if (sec > 0 && sec < 60) {
+        return `${sec} ${this.$options.filters.simplePluralize('second', sec)}`;
+      }
+
+      const min = Math.floor(dayjs.duration(sec, 'seconds').asMinutes());
+      return `${min} ${this.$options.filters.simplePluralize('minute', min)}`;
     },
   },
   methods: {