Merge pull request #137 from fivejars/1.4

1.4

js/gated-content/src/components/AccordionTab.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="accordion-tab">
+    <div class="accordion-tab__header"
+    @click="toggle"
+    >
+      <div>{{ title }}</div>
+      <div>{{ open ? '-' : '+' }}</div>
+    </div>
+    <div class="accordion-tab__content"
+         v-if="content && open"
+         v-html="content"
+    ></div>
+    <div
+      v-else-if="open"
+      class="accordion-tab__content"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AccordionTab',
+  props: {
+    title: {
+      type: String,
+      default: 'Tab Title',
+    },
+    content: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      open: false,
+    };
+  },
+  methods: {
+    toggle() {
+      this.open = !this.open;
+    },
+  },
+};
+</script>

js/gated-content/src/components/event/EventTeaser.vue

@@ -50,10 +50,11 @@
 <script>
 import AddToFavorite from '@/components/AddToFavorite.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
-import dayjs from 'dayjs';
+import { EventMixin } from '@/mixins/EventMixin';
 
 export default {
   name: 'EventTeaser',
+  mixins: [EventMixin],
   components: {
     SvgIcon,
     AddToFavorite,
@@ -66,28 +67,7 @@ export default {
   },
   computed: {
     date() {
-      return dayjs(this.video.attributes.date.value).format('YYYY-MM-DD');
-    },
-    time() {
-      return dayjs(this.video.attributes.date.value).format('h:mm a');
-    },
-    duration() {
-      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 eventStartDate = dayjs(this.video.attributes.date.value);
-      const startsDuration = dayjs.duration(eventStartDate - dayjs());
-
-      if (startsDuration.asHours() >= 48) {
-        return `${Math.floor(startsDuration.asDays())} days`;
-      }
-
-      const { prependZero } = this.$options.filters;
-      return `${prependZero(Math.floor(startsDuration.asHours()))}:${prependZero(startsDuration.minutes())}:${prependZero(startsDuration.seconds())}`;
+      return this.$dayjs.date(this.video.attributes.date.value).format('YYYY-MM-DD');
     },
     image() {
       if (this.video.attributes['field_ls_image.field_media_image']) {
@@ -105,12 +85,6 @@ export default {
       return this.video.attributes.field_ls_level ? this.video.attributes.field_ls_level.name
         : this.video.attributes.level.name;
     },
-    isOnAir() {
-      const dateStart = new Date(this.video.attributes.date.value);
-      const dateEnd = new Date(this.video.attributes.date.end_value);
-      const now = new Date();
-      return dateStart < now && now < dateEnd;
-    },
     route() {
       switch (this.video.type) {
         case 'eventinstance--live_stream':

js/gated-content/src/components/event/ScheduleEventCard.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="schedule-event-card" :class="{'past': !isUpcoming}">
     <div class="info">
-      <div class="time">{{ event.attributes.date | start_and_duration }}</div>
+      <div class="time">{{ event.date | start_and_duration }}</div>
       <div class="title">
-        <router-link
-          :to="{ name: route, params: { id: event.id } }"
-          v-if="isUpcoming"
-        >
-          {{ event.attributes.title }}
-        </router-link>
+        <template v-if="route && isUpcoming">
+          <router-link :to="{ name: route, params: { id: event.uuid } }">
+            {{ event.title }}
+          </router-link>
+        </template>
         <template v-else>
-          {{ event.attributes.title }}
+          {{ event.title }}
         </template>
       </div>
-      <div class="instructor" v-if="instructor">{{ instructor }}</div>
+      <div class="instructor" v-if="event.host_name">{{ event.host_name }}</div>
+      <div v-if="isPrivate"><div class="timer private">Private</div></div>
     </div>
     <AddToFavorite
       v-if="isUpcoming"
-      :id="event.attributes.drupal_internal__id"
-      :type="'eventinstance'"
-      :bundle="type"
+      :id="event.id"
+      :type="event.type"
+      :bundle="event.bundle"
     ></AddToFavorite>
   </div>
 </template>
@@ -40,24 +40,22 @@ export default {
   },
   computed: {
     route() {
-      switch (this.event.type) {
-        case 'eventinstance--live_stream':
-          return 'LiveStream';
-        case 'eventinstance--virtual_meeting':
-          return 'VirtualMeeting';
-        default:
-          return 'LiveStream';
-      }
+      const routes = {
+        eventinstance: {
+          live_stream: 'LiveStream',
+          virtual_meeting: 'VirtualMeeting',
+        },
+        personal_training: {
+          personal_training: 'PersonalTraining',
+        },
+      };
+      return routes[this.event.type][this.event.bundle];
     },
     isUpcoming() {
-      return (new Date(this.event.attributes.date.end_value)).getTime() > (new Date()).getTime();
-    },
-    instructor() {
-      return this.event.attributes.field_ls_host_name ? this.event.attributes.field_ls_host_name
-        : this.event.attributes.host_name;
+      return (new Date(this.event.date.end_value)).getTime() > (new Date()).getTime();
     },
-    type() {
-      return this.event.type.replace('eventinstance--', '');
+    isPrivate() {
+      return this.event.type === 'personal_training';
     },
   },
 };

js/gated-content/src/components/personal-training/Meeting.vue

@@ -0,0 +1,49 @@
+<template>
+  <JoinMeeting
+    v-if="!isJoinedVideoSession"
+  ></JoinMeeting>
+  <div
+    class="personal-training-full-screen"
+    v-else
+  >
+    <Chat></Chat>
+    <LeaveMeeting></LeaveMeeting>
+    <ViewOptions></ViewOptions>
+    <div
+      class="personal-training-meeting"
+    >
+      <MeetingPlayer></MeetingPlayer>
+      <ControlPanel></ControlPanel>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ControlPanel from '@/components/personal-training/meeting/ControlPanel.vue';
+import MeetingPlayer from '@/components/personal-training/meeting/MeetingPlayer.vue';
+import JoinMeeting from '@/components/personal-training/meeting/JoinMeeting.vue';
+import Chat from '@/components/personal-training/modal/Chat.vue';
+import LeaveMeeting from '@/components/personal-training/modal/LeaveMeeting.vue';
+import ViewOptions from '@/components/personal-training/modal/ViewOptions.vue';
+
+export default {
+  components: {
+    Chat, JoinMeeting, MeetingPlayer, ControlPanel, ViewOptions, LeaveMeeting,
+  },
+  computed: {
+    ...mapGetters([
+      'isJoinedVideoSession',
+    ]),
+  },
+  watch: {
+    isJoinedVideoSession(newVal) {
+      if (newVal === true) {
+        document.querySelector('html').style.overflow = 'hidden';
+      } else {
+        document.querySelector('html').style.overflow = 'scroll';
+      }
+    },
+  },
+};
+</script>