@icvdeveloper/common-module 1.4.13 → 2.0.0

package/dist/runtime/components/media/ArchivePlayerAndContentContainer.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { ref, toRefs } from "vue";
+import { computed, ref, toRefs } from "vue";
 import { storeToRefs } from "pinia";
+import { find } from "lodash-es";
 import { useEvents } from "../../composables/useEvents";
 import { useClassBinding } from "../../composables/useClassBinding";
-import type { Conference, Presentation } from "../../models/conference";
-import { SelectedContent } from "../../enums/general";
 import { usePresentationsStore } from "../../store/presentations";
+import { SelectedContent } from "../../enums/general";
+import type { Conference, Presentation, Sponsor } from "../../models/conference";
 import type {
   PlayerAndContentClassObj,
   PlayerAndContentCompObj,
@@ -50,6 +51,20 @@ const { classBinding } = useClassBinding();
 const { getSponsors } = useEvents();
 
 const { selectedContent } = storeToRefs(usePresentationsStore());
+
+// computed
+const hasSponsors = computed((): boolean => {
+  // return if there are any matching sponsors that have images to display here
+  const hasImage: Sponsor | undefined = find(
+    getSponsors(conference.value.affiliates),
+    function(o: Sponsor) { return o.photo != null && o.photo.length > 0 }
+  )
+  return hasImage != undefined;
+})
+
+const getSponsorsResult = computed((): Sponsor[] => {
+  return getSponsors(conference.value.affiliates);
+});
 </script>
 
 <template>
@@ -99,7 +114,7 @@ const { selectedContent } = storeToRefs(usePresentationsStore());
           classBinding(
             classObject,
             'withTabsChild',
-            'flex-1 grid grid-cols-7 grid-rows-2 gap-y-4'
+            `flex-1 grid grid-cols-7 ${hasSponsors ? 'grid-rows-2' : 'grid-rows-1'} gap-y-4`
           )
         "
       >
@@ -133,6 +148,7 @@ const { selectedContent } = storeToRefs(usePresentationsStore());
         />
         <!-- sponsor -->
         <figure
+          v-if="hasSponsors"
           class="col-span-7 md:col-start-5 md:col-span-3 lg:col-start-6 lg:col-span-6 row-span-1 flex flex-col p-6 text-center"
         >
           <template

package/dist/runtime/components/media/ArchiveVideoPlayer.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import { toRefs, computed, watch, onMounted, nextTick } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { toRefs, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
 import { get } from "lodash-es";
+import { useClassBinding } from "../../composables/useClassBinding";
+import {
+    modalClosedEventHook
+ } from "../../composables/useEventHooks";
 import type { Presentation, PlayerObj } from "../../models/conference";
 import type { WebcastPlayerClassObj } from "../../@types/components";
-import { useClassBinding } from "../../composables/useClassBinding";
 
 type Props = {
   presentation: Presentation;
@@ -35,9 +37,15 @@ let icvPlayerObj: PlayerObj = {
 };
 let timeInterval: NodeJS.Timer | null = null;
 
+modalClosedEventHook.on(() => {
+  console.log('modal closed');
+  cleanup();
+})
+
+
 // emits
 const emit = defineEmits<{
-  (event: "time", value: Number): void;
+  (event: "time", value: number): void;
 }>();
 
 // computed
@@ -120,7 +128,7 @@ const cleanup = () => {
 
 // watchers
 watch(
-  presentation,
+  presentation.value,
   (_oldPresentation: Presentation, _newPresentation: Presentation) => {
     if (_oldPresentation.type !== _newPresentation.type) {
       setupMediaPlayer();
@@ -145,7 +153,7 @@ onMounted(() => {
   };
 });
 
-onBeforeRouteLeave(() => {
+onUnmounted(() => {
   cleanup();
 });
 </script>

package/dist/runtime/components/media/WebcastVideoPlayer.vue

@@ -73,7 +73,7 @@ const playStream = () => {
 
 // watchers
 watch(
-  presentation,
+  presentation.value,
   (_oldPresentation: Presentation, _newPresentation: Presentation) => {
     if (_oldPresentation.type !== _newPresentation.type) {
       setupMediaPlayer();

package/dist/runtime/components/media/components/ArchiveMediaContainer.vue

@@ -37,7 +37,7 @@ const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
 const emit = defineEmits(["previewEnded"]);
 
 // data
-let playing = ref<boolean>(true);
+const playing = ref<boolean>(true);
 
 // computed
 const isPreview = computed((): boolean => {
@@ -46,31 +46,31 @@ const isPreview = computed((): boolean => {
     false
   );
   // @todo add check against conference-level portal configs
-  // || pagesConfigValue.value("archive_player.preview_enabled", false);
   return !isLoggedIn && previewEnabled;
 });
 
 const previewDuration = computed((): number => {
   return pagesConfigValue.value("archive_player.preview_duration", 60);
   // @todo add check against conference-level portal configs
-  // ||  pagesConfigValue.value("archive_player.preview_duration", 60);
 });
 
 // methods
-const firePreviewEnded = () => {
+const firePreviewEnded = (): void => {
   playing.value = false;
   if (ref.mediaPlayer) {
     ref.mediaPlayer.stop();
     // @todo ensure emit will suffice
     // previewEnded = true;
   }
+  console.log('firePreviewEnded')
   emit("previewEnded");
 };
 
-const checkTime = (_time: Number) => {
+const checkTime = (_time: number): void => {
   // @todo set current time for chapter timings only
   // setCurrentTime(_time);
-  if (isPreview && _time >= previewDuration.value) {
+  if (isPreview.value && _time >= previewDuration.value) {
+    console.log('checkTime calling firePreviewEnded')
     firePreviewEnded();
   }
 };
@@ -82,9 +82,9 @@ const checkTime = (_time: Number) => {
       ref="mediaPlayer"
       :presentation="presentation"
       :playing="playing"
-      :class-object="classObject.components.webcastPlayer"
+      :class-object="classObject?.components?.webcastPlayer"
       @time="checkTime"
-    ></CommonArchiveVideoPlayer>
+    />
   </div>
 </template>
 

package/dist/runtime/components/media/components/CeCreditNotification.vue

@@ -36,7 +36,7 @@ const countdownLoopId = ref<any>(null);
 // computed
 const timeRemainingClass = computed(() => {
   if (displayFor.value > 10) {
-    return "font-bold text-green-dark";
+    return "font-bold text-green-600";
   }
   return "font-bold text-red";
 });
@@ -105,7 +105,7 @@ onMounted(() => {
         classBinding(
           classObject,
           'container',
-          'flex bg-yellow-lightest shadow text-grey-darker py-6 px-10'
+          'flex bg-yellow-100 shadow text-gray-700 py-6 px-10'
         )
       "
     >

package/dist/runtime/components/media/components/ContentArea.vue

@@ -48,7 +48,7 @@ const { classBinding } = useClassBinding();
 const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
 
 // reactive data
-let sponsors = ref<Array<Sponsor>>([]);
+const sponsors = ref<Array<Sponsor>>([]);
 
 // computed
 const trackEmbedHtml = computed((): string | null => {
@@ -56,7 +56,8 @@ const trackEmbedHtml = computed((): string | null => {
 });
 
 // methods
-const getFeaturedSponsors = () => {
+
+const getFeaturedSponsors = (): void => {
   const featuredSponsorLevel = get(
     pagesConfigValue,
     "webcast.featured_sponsor_level.value",
@@ -69,7 +70,7 @@ const getFeaturedSponsors = () => {
         return response.json();
       })
       .then((data) => {
-        sponsors = filter(data, { role: "sponsor" });
+        sponsors.value = filter(data, { role: "sponsor" });
       });
   }
 };
@@ -83,29 +84,65 @@ onMounted(() => {
 <template>
   <div :class="classBinding(classObject, 'container', 'flex flex-col')">
     <CommonComponentsOverviewPanel
-      v-if="selectedContent.type == 'overview'"
+      v-if="selectedContent.type == SelectedContent.OVERVIEW"
       :class="
         classBinding(
-          classObject.components.overviewPanel,
+          classObject.components?.overviewPanel,
           'container',
           'overflow-y-scroll no-scrollbar h-full'
         )
       "
       :presentation="presentation"
-      :class-object="classObject.components.overviewPanel"
-    ></CommonComponentsOverviewPanel>
+      :class-object="classObject.components?.overviewPanel"
+    />
     <CommonComponentsAgendaPanel
-      v-if="selectedContent.type == 'agenda'"
+      v-if="selectedContent.type == SelectedContent.AGENDA"
       :class="
         classBinding(
-          classObject.components.agendaPanel,
+          classObject.components?.agendaPanel,
           'container',
           'overflow-y-scroll no-scrollbar h-full'
         )
       "
       :conference="webcastConference"
-      :class-object="classObject.components.agendaPanel"
-    ></CommonComponentsAgendaPanel>
+      :class-object="classObject.components?.agendaPanel"
+    />
+    <CommonComponentsPresentersPanel
+      v-if="selectedContent.type == SelectedContent.PRESENTERS"
+      :class="
+        classBinding(
+          classObject.components?.agendaPanel,
+          'container',
+          'overflow-y-scroll no-scrollbar h-full'
+        )
+      "
+      :presentation="presentation"
+      :class-object="classObject.components?.agendaPanel"
+    />
+    <CommonComponentsDocumentsPanel
+      v-if="selectedContent.type == SelectedContent.DOCUMENTS"
+      :class="
+        classBinding(
+          classObject.components?.agendaPanel,
+          'container',
+          'overflow-y-scroll no-scrollbar h-full'
+        )
+      "
+      :presentation="presentation"
+      :class-object="classObject.components?.agendaPanel"
+    />
+    <CommonComponentsSponsorsPanel
+      v-if="selectedContent.type == SelectedContent.SPONSORS"
+      :class="
+        classBinding(
+          classObject.components?.agendaPanel,
+          'container',
+          'overflow-y-scroll no-scrollbar h-full'
+        )
+      "
+      :presentation="presentation"
+      :class-object="classObject.components?.agendaPanel"
+    />
     <span
       v-if="selectedContent.type == 'html'"
       :class="
@@ -116,8 +153,8 @@ onMounted(() => {
         )
       "
       v-html="selectedContent.content"
-    ></span>
-    <template v-if="selectedContent.type == 'track_html'">
+    />
+    <template v-if="selectedContent.type == SelectedContent.TRACK_HTML">
       <span
         v-if="trackEmbedHtml != null"
         :class="
@@ -128,7 +165,7 @@ onMounted(() => {
           )
         "
         v-html="trackEmbedHtml"
-      ></span>
+      />
       <div
         v-if="trackEmbedHtml === null"
         :class="

package/dist/runtime/components/media/components/ContentTabs.vue

@@ -93,7 +93,7 @@ onMounted(() => {
           classBinding(
             classObject,
             'tabList',
-            'list-reset flex flex-row flex-wrap justify-start'
+            'flex flex-row flex-wrap justify-start'
           )
         "
       >
@@ -170,7 +170,7 @@ onMounted(() => {
             classBinding(
               classObject,
               'mobileTabList',
-              'flex-col self-center list-reset mx-auto'
+              'flex-col self-center mx-auto'
             )
           "
         >

package/dist/runtime/components/media/components/DocumentsPanel.vue

@@ -44,7 +44,7 @@ const documentArray = computed((): Array<Document> | null => {
       )
     "
   >
-    <ul :class="classBinding(classObject, 'documentList', 'list-reset')">
+    <ul :class="classBinding(classObject, 'documentList', '')">
       <li
         v-for="(document, index) in documentArray"
         :key="index"
@@ -66,7 +66,7 @@ const documentArray = computed((): Array<Document> | null => {
             classBinding(
               classObject,
               'elementLink',
-              'no-underline font-semibold text-sm md:text-base'
+              'font-semibold text-sm md:text-base'
             )
           "
           target="_blank"

package/dist/runtime/components/media/components/MediaContainer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, toRefs } from "vue";
+import { inject, ref, toRefs } from "vue";
 import type { Conference, Presentation } from "../../../models/conference";
 import type {
   MediaContainerClassObj,
@@ -37,10 +37,6 @@ const emit = defineEmits<{
   (event: string, value: Presentation): void;
 }>();
 
-console.log(
-  config.public.awsDefaultRegion + ", " + config.public.resourcePrefix
-);
-
 const { currentStreamData, currentPresentation } = useStream(
   config.public.awsDefaultRegion,
   config.public.resourcePrefix,
@@ -55,8 +51,8 @@ const { currentStreamData, currentPresentation } = useStream(
       ref="mediaPlayer"
       :stream="currentStreamData"
       :presentation="currentPresentation"
-      :class-object="classObject.components.webcastPlayer"
-    ></CommonWebcastVideoPlayer>
+      :class-object="classObject?.components?.webcastPlayer"
+    />
   </div>
 </template>
 

package/dist/runtime/components/media/components/PresentersPanel.vue

@@ -1,57 +1,76 @@
-<template>
-  <span v-if="presenterLevelArray['presenters_all'].presenters.length > 0">
-    <presenters-detail
-        :presenters-by-level="presenterLevelArray"
-        :pres-format="layoutFormat"
-        :item-width="itemWidth"
-        :show-levels="false"
-        :is-compact="isCompact"
-    ></presenters-detail>
-  </span>
-  <div v-else class="text-grey-800 px-2 py-4">
-      <p class="text-base leading-normal font-light">There are no presenters associated with this presentation.</p>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref, toRefs, computed, provide } from "vue";
+import { sortBy } from "lodash-es";
+import { Position } from "../../../enums/general";
+import type {
+  Presentation,
+  Presenter,
+  PresenterWithPivot,
+} from "../../../models/conference";
+
+type Props = {
+  presentation: Presentation;
+  itemWidth?: string;
+  layoutFormat?: string;
+  isCompact?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  itemWidth: "120",
+  layoutFormat: "grid",
+  isCompact: true,
+});
 
-<script>
-import PresentersDetail from '@/components/presenters/PresentersDetail';
+const { presentation, itemWidth, layoutFormat, isCompact } = toRefs(props);
 
-export default {
-  props: {
-    itemWidth: {
-      type: String,
-      default: '120'
-    },
-    layoutFormat: {
-      type: String,
-      default: 'PresenterItemGrid'
-    },
-    isCompact: {
-      default: true,
-      type: Boolean
-    }
-  },
-  components: {
-    PresentersDetail
-  },
-  provide() {
-    return {
-      itemWidth: this.itemWidth,
-      imageStyle: this.imageStyle,
+// provided values
+provide("itemWidth", "120");
+
+// comnputed
+const presenterArray = computed((): Presenter[] => {
+  let returnArray: Presenter[] = [];
+  if(presentation.value?.presenters && presentation.value.presenters.length) {
+      returnArray = sortBy(
+        presentation.value.presenters,
+        // TODO - ensure that the presentation includes presenter order.
+        // previously, this was retrieved from $parent.currentPresentation
+        // function (presenter: PresenterWithPivot) {
+        //   return presenter.pivot.order;
+        // }
+        (presenter: Presenter) => {
+          return presenter.last_name;
+        }
+      );
     };
-  },
-  computed: {
-    presenterLevelArray() {
-      let returnArray = [];
-      returnArray['presenters_all'] = { 'presenters': _.sortBy(this.$parent.currentPresentation.presenters, function (presenter) {
-        return presenter.pivot.order;
-      }) };
-      return returnArray;
-    }
-  }
-};
+  return returnArray;
+});
 </script>
 
+<template>
+  <div>
+    <template v-if="presenterArray && presenterArray.length > 0">
+      <CommonPresenterListing 
+        v-for="(presenter, index) in presenterArray"
+        :key="index"
+        :presenter="presenter"
+        :is-small-grouped-track="isCompact"
+        :show-bio="false"
+        :enable-bio="false"
+        :bio-link-on-name="false"
+        :image-position="Position.LEFT"
+      />
+    </template>
+    <div
+      v-else
+      class="text-grey-800 px-2 py-4"
+    >
+      <p class="text-base leading-normal font-light">
+        There are no presenters associated with this presentation.
+      </p>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .presenter-grid {
   display: grid;
@@ -62,4 +81,4 @@ export default {
   align-items: center;
   align-self: center;
 }
-</style>
+</style>

package/dist/runtime/components/media/components/SessionReporting.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, watch, onMounted } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { toRefs, watch, onMounted, onUnmounted } from "vue";
 import { useApi } from "../../../composables/useApi";
 import { useCookie } from "#app";
 // data
@@ -94,8 +93,10 @@ const initSessionLoop = () => {
 };
 
 // watchers
-watch(loggableId, (_newId: number, _oldId: number) => {
+watch(loggableId, (_newId, _oldId) => {
+  if (_newId != _oldId) {
   updateSession();
+  }
 });
 
 // mounted
@@ -104,7 +105,7 @@ onMounted(() => {
   initSessionLoop();
 });
 
-onBeforeRouteLeave(() => {
+onUnmounted(() => {
   clearInterval(sessionLoopId);
 });
 </script>

package/dist/runtime/components/media/components/SponsorsPanel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs } from "vue";
+import { ref, toRefs } from "vue";
 import type { Presentation, Sponsor } from "../../../models/conference";
 import type { SponsorsPanelClassObj } from "../../../@types/components";
 import { useClassBinding } from "../../../composables/useClassBinding";
@@ -40,7 +40,7 @@ const sponsorsArray = ref<Array<Sponsor> | undefined>(
 // TODO: presentation.tracks too likely to be undefined to reliably set on mount
 const trackSponsorsArray = ref<Array<Sponsor> | undefined>([]);
 
-watch(presentation, (_newPresentation: Presentation) => {
+watch(presentation.value, (_newPresentation: Presentation) => {
   if (_newPresentation.sponsors) {
     sponsorsArray.value = _newPresentation.sponsors;
   }
@@ -61,7 +61,7 @@ watch(presentation, (_newPresentation: Presentation) => {
           'text-grey-800 px-4 py-4 mb-4'
         ),
         trackSponsorsArray != undefined && trackSponsorsArray.length > 0
-          ? 'border-b border-light-grey'
+          ? 'border-b border-gray-400'
           : '',
       ]"
     >