@icvdeveloper/common-module 1.4.14 → 2.1.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>
@@ -81,7 +96,10 @@ const { selectedContent } = storeToRefs(usePresentationsStore());
     </div>
 
     <!-- TABS -->
-    <div v-else :class="classBinding(classObject, 'withTabsContainer', '')">
+    <div
+      v-else
+      :class="classBinding(classObject, 'withTabsContainer', '')"
+    >
       <CommonComponentsContentTabs
         :class="
           classBinding(
@@ -99,7 +117,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 +151,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
@@ -66,7 +74,7 @@ const playStream = () => {
 
 const setupMediaPlayer = () => {
   if (icvPlayerObj) {
-    icvPlayerObj = <PlayerObj>{};
+    icvPlayerObj = {} as PlayerObj;
   }
   if (isFile.value) {
     nextTick(() => {
@@ -113,14 +121,14 @@ const cleanup = () => {
   if (icvPlayerObj) {
     stop();
     remove();
-    icvPlayerObj = <PlayerObj>{};
+    icvPlayerObj = {} as PlayerObj;
   }
   clearInterval(timeInterval);
 };
 
 // watchers
 watch(
-  presentation,
+  presentation.value,
   (_oldPresentation: Presentation, _newPresentation: Presentation) => {
     if (_oldPresentation.type !== _newPresentation.type) {
       setupMediaPlayer();
@@ -145,7 +153,7 @@ onMounted(() => {
   };
 });
 
-onBeforeRouteLeave(() => {
+onUnmounted(() => {
   cleanup();
 });
 </script>
@@ -160,27 +168,15 @@ onBeforeRouteLeave(() => {
       id="mediaPlayer"
       ref="mediaPlayer"
       :class="classBinding(classObject, 'playerElement', '')"
-    ></div>
+    />
     <span
       v-if="isHtml"
       :v-html="presentation.embed_html"
       :class="classBinding(classObject, 'embedElement', '')"
-    ></span>
+    />
   </div>
 </template>
 
 <style>
-#archive-player-container > span {
-  padding-bottom: 56.25%;
-  height: 0;
-  position: relative;
-  display: block;
-}
-#archive-player-container > span > iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
+#archive-player-container>span{display:block;height:0;padding-bottom:56.25%;position:relative}#archive-player-container>span>iframe{height:100%;left:0;position:absolute;top:0;width:100%}
 </style>

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

@@ -99,7 +99,10 @@ const hasAccess = computed((): boolean => {
     </div>
 
     <!-- TABS -->
-    <div v-else :class="classBinding(classObject, 'withTabsContainer', '')">
+    <div
+      v-else
+      :class="classBinding(classObject, 'withTabsContainer', '')"
+    >
       <CommonComponentsContentTabs
         :class="
           classBinding(

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, toRefs, computed, watch, onMounted, nextTick } from "vue";
+import { toRefs, computed, watch, onMounted, nextTick } from "vue";
 import { get } from "lodash-es";
 import type { Presentation, Stream, PlayerObj } from "../../models/conference";
 import type { WebcastPlayerClassObj } from "../../@types/components";
@@ -47,7 +47,7 @@ const isHls = computed(() => {
 // methods
 const setupMediaPlayer = () => {
   if (icvPlayerObj) {
-    icvPlayerObj = <PlayerObj>{};
+    icvPlayerObj = {} as PlayerObj;
   }
   if (isHls.value) {
     nextTick(() => {
@@ -73,7 +73,7 @@ const playStream = () => {
 
 // watchers
 watch(
-  presentation,
+  presentation.value,
   (_oldPresentation: Presentation, _newPresentation: Presentation) => {
     if (_oldPresentation.type !== _newPresentation.type) {
       setupMediaPlayer();
@@ -114,27 +114,15 @@ onMounted(() => {
       id="mediaPlayer"
       ref="mediaPlayer"
       :class="classBinding(classObject, 'playerElement', '')"
-    ></div>
+    />
     <span
       v-if="isHtml"
       :v-html="stream.embed_html"
       :class="classBinding(classObject, 'embedElement', '')"
-    ></span>
+    />
   </div>
 </template>
 
 <style>
-#webcast-player-container > span {
-  padding-bottom: 56.25%;
-  height: 0;
-  position: relative;
-  display: block;
-}
-#webcast-player-container > span > iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
+#webcast-player-container>span{display:block;height:0;padding-bottom:56.25%;position:relative}#webcast-player-container>span>iframe{height:100%;left:0;position:absolute;top:0;width:100%}
 </style>

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

@@ -40,15 +40,16 @@ const { classBinding } = useClassBinding();
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .sponsor-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 10px;
-}
-.sponsor-grid .grid-item {
-  align-items: center;
-  align-self: center;
-  justify-self: center;
+
+  .grid-item {
+    align-items: center;
+    align-self: center;
+    justify-self: center;
+  }
 }
 </style>

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,13 +82,13 @@ 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>
 
-<style scoped>
+<style scoped lang="postcss">
 .media-container {
   display: grid;
   grid-template-columns: var(--media-template-columns-default);
@@ -102,9 +102,9 @@ const checkTime = (_time: Number) => {
   display: grid;
 }
 
-@screen lg {
-  img.normal {
-    max-height: 65vh;
+img.normal {
+  @screen lg {
+    max-height: 65vh; /* max height before distorting container */
   }
 }
 
@@ -125,12 +125,14 @@ const checkTime = (_time: Number) => {
   .media-container {
     grid-template-columns: var(--media-template-columns-large);
   }
+
   .expand-overlay {
     @apply p-2;
     display: block;
-  }
-  .expand-overlay:hover {
-    opacity: 0.7;
+
+    &:hover {
+      opacity: 0.7;
+    }
   }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Pusher from "pusher-js";
 import Echo from "laravel-echo";
-import { toRefs, computed } from "vue";
+import { computed, onMounted, ref, toRefs } from "vue";
 import type { Conference } from "../../../models/conference";
 import type { CeCreditPanelClassObj } from "../../../@types/components";
 import { useClassBinding } from "../../../composables/useClassBinding";
@@ -36,14 +36,14 @@ 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";
 });
 
 // methods
 const handleNotification = (_conference: Conference) => {
-  clearInterval(countdownLoopId);
+  clearInterval(countdownLoopId.value);
   window.scrollTo({ top: 0, behavior: "smooth" });
   visible.value = true;
   displayFor.value = _conference.ce_credit_config?.display_for || 30;
@@ -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'
         )
       "
     >
@@ -125,13 +125,13 @@ onMounted(() => {
               classBinding(classObject, 'timeInSeconds', ''),
               timeRemainingClass,
             ]"
-            >{{ displayFor }} seconds
+        >{{ displayFor }} seconds
           </span>
         </p>
         <p
           :class="classBinding(classObject, 'promptText', '')"
           v-text="promptText"
-        ></p>
+        />
         <p :class="classBinding(classObject, 'buttonContainer', '')">
           <button
             :class="
@@ -139,11 +139,11 @@ onMounted(() => {
             "
             @click="acceptClick"
             v-text="buttonText"
-          ></button>
+          />
         </p>
       </div>
     </div>
   </transition>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="postcss" scoped></style>

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,11 @@ const trackEmbedHtml = computed((): string | null => {
 });
 
 // methods
-const getFeaturedSponsors = () => {
+
+// TODO - this is not used in this component.
+// it looks like the same logic for displaying stream sponsors is already being handled in the ArchivePlayerAndContentContainer.
+// confirm that that fulfills this logic's purpose, and remove this logic.
+const getFeaturedSponsors = (): void => {
   const featuredSponsorLevel = get(
     pagesConfigValue,
     "webcast.featured_sponsor_level.value",
@@ -69,7 +73,7 @@ const getFeaturedSponsors = () => {
         return response.json();
       })
       .then((data) => {
-        sponsors = filter(data, { role: "sponsor" });
+        sponsors.value = filter(data, { role: "sponsor" });
       });
   }
 };
@@ -83,29 +87,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 +156,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 +168,7 @@ onMounted(() => {
           )
         "
         v-html="trackEmbedHtml"
-      ></span>
+      />
       <div
         v-if="trackEmbedHtml === null"
         :class="
@@ -155,7 +195,7 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .content {
   position: relative;
 }
@@ -168,8 +208,9 @@ onMounted(() => {
   z-index: 40;
   position: absolute;
   transition: 0.4s ease;
-}
-.content-expand-overlay:hover {
-  opacity: 0.7;
+
+  &:hover {
+    opacity: 0.7;
+  }
 }
 </style>