@icvdeveloper/common-module 1.4.14 → 2.1.0

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

@@ -52,7 +52,7 @@ const hasAgendaTab = computed((): boolean => {
 });
 
 const selectedTabClass = computed((): string => {
-  return props.classObject.selectedTab;
+  return props.classObject.selectedTab as string;
 });
 
 // methods
@@ -61,7 +61,7 @@ const tabToggle = () => {
 };
 
 const showItem = (_index: number) => {
-  let clickedItem = items.value[_index];
+  const clickedItem = items.value[_index];
 
   if (clickedItem.type === SelectedContent.URL) {
     window.open(clickedItem.content);
@@ -75,9 +75,6 @@ onMounted(() => {
     selectedContent.value = items.value[0];
   }
 });
-
-// ...mapState("playerConfig"),
-// ...mapState(["agendaAlias"])
 </script>
 
 <template>
@@ -93,7 +90,7 @@ onMounted(() => {
           classBinding(
             classObject,
             'tabList',
-            'list-reset flex flex-row flex-wrap justify-start'
+            'flex flex-row flex-wrap justify-start'
           )
         "
       >
@@ -133,8 +130,9 @@ onMounted(() => {
                 'primary-link inline-block py-2 px-1 cursor-pointer'
               )
             "
-            >{{ agendaAlias }}</nuxt-link
           >
+            {{ agendaAlias }}
+          </nuxt-link>
         </li>
       </ul>
     </div>
@@ -148,7 +146,10 @@ onMounted(() => {
       <div
         :class="classBinding(classObject, 'mobileButtonContainer', 'p-1 block')"
       >
-        <button class="flex items-center px-3 py-2 mx-auto" @click="tabToggle">
+        <button
+          class="flex items-center px-3 py-2 mx-auto"
+          @click="tabToggle"
+        >
           <svg
             class="fill-current h-3 w-3"
             viewBox="0 0 20 20"
@@ -170,7 +171,7 @@ onMounted(() => {
             classBinding(
               classObject,
               'mobileTabList',
-              'flex-col self-center list-reset mx-auto'
+              'flex-col self-center mx-auto'
             )
           "
         >
@@ -219,8 +220,9 @@ onMounted(() => {
                   'primary-link inline-block py-2 px-2 cursor-pointer'
                 )
               "
-              >{{ agendaAlias }}</nuxt-link
             >
+              {{ agendaAlias }}
+            </nuxt-link>
           </li>
         </ul>
       </div>
@@ -228,18 +230,17 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .tab-items {
-  @apply mr-1 flex-1;
-}
-@screen sm {
-  .tab-items {
-    @apply flex-initial;
-  }
+  @apply mr-1 flex-1 sm:flex-initial;
 }
 
 .active {
-  background: linear-gradient(0deg, rgb(80, 80, 80) 0%, rgb(180, 180, 180) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(80, 80, 80, 1) 0%,
+    rgba(180, 180, 180, 1) 100%
+  );
   color: white;
   font-weight: bold;
 }
@@ -247,20 +248,31 @@ onMounted(() => {
 .tab-bar {
   @apply flex flex-wrap;
   background: rgb(226, 226, 226);
-  background: linear-gradient(0deg, rgb(226, 226, 226) 0%, rgb(244, 244, 244) 100%);
-}
-.tab-bar .close {
-  @apply block flex flex-1 justify-end;
-}
-.tab-bar .close:hover {
-  filter: opacity(0.7);
+  background: linear-gradient(
+    0deg,
+    rgba(226, 226, 226, 1) 0%,
+    rgba(244, 244, 244, 1) 100%
+  );
+
+  .close {
+    @apply block flex flex-1 justify-end;
+
+    &:hover {
+      filter: opacity(0.7);
+    }
+  }
 }
 
 .tab-bar .item {
   display: block;
   float: left;
-}
-.tab-bar .item:hover {
-  background: linear-gradient(0deg, rgb(180, 180, 180) 0%, rgb(220, 220, 220) 100%);
+
+  &:hover {
+    background: linear-gradient(
+      0deg,
+      rgba(180, 180, 180, 1) 0%,
+      rgba(220, 220, 220, 1) 100%
+    );
+  }
 }
 </style>

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

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { toRefs, computed } from "vue";
-import { Presentation } from "../../../models/conference";
+import { useClassBinding } from "../../../composables/useClassBinding";
+import type { Presentation } from "../../../models/conference";
 import type { Document } from "../../../models/document";
 import type { DocumentsPanelClassObj } from "../../../@types/components";
-import { useClassBinding } from "../../../composables/useClassBinding";
 
 type Props = {
   presentation: Presentation;
@@ -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"
@@ -52,10 +52,10 @@ const documentArray = computed((): Array<Document> | null => {
           index == documentArray.length - 1
             ? classBinding(classObject, 'lastElement', 'py-2')
             : classBinding(
-                classObject,
-                'listElement',
-                'py-2 border-b-2 contrast-border'
-              ),
+              classObject,
+              'listElement',
+              'py-2 border-b-2 contrast-border'
+            ),
         ]"
       >
         <!-- fix file image -->
@@ -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"
@@ -108,19 +108,21 @@ const documentArray = computed((): Array<Document> | null => {
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .document-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
-}
-.document-grid .grid-item {
-  display: inline-block;
-  align-items: center;
-  align-self: center;
-}
-.document-grid .grid-item a:hover {
-  text-decoration: underline;
+
+  .grid-item {
+    display: inline-block;
+    align-items: center;
+    align-self: center;
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .icon {

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

@@ -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,12 +51,12 @@ const { currentStreamData, currentPresentation } = useStream(
       ref="mediaPlayer"
       :stream="currentStreamData"
       :presentation="currentPresentation"
-      :class-object="classObject.components.webcastPlayer"
-    ></CommonWebcastVideoPlayer>
+      :class-object="classObject?.components?.webcastPlayer"
+    />
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .media-container {
   display: grid;
   grid-template-columns: var(--media-template-columns-default);
@@ -74,9 +70,9 @@ const { currentStreamData, currentPresentation } = useStream(
   display: grid;
 }
 
-@screen lg {
-  img.normal {
-    max-height: 65vh;
+img.normal {
+  @screen lg {
+    max-height: 65vh; /* max height before distorting container */
   }
 }
 
@@ -97,12 +93,14 @@ const { currentStreamData, currentPresentation } = useStream(
   .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/OverviewPanel.vue

@@ -42,8 +42,11 @@ const sessionOverview = computed((): string | null => {
       v-if="sessionOverview"
       :class="classBinding(classObject, 'htmlElement', '')"
       v-html="sessionOverview"
-    ></span>
-    <p v-else :class="classBinding(classObject, 'noOverviewElement', '')">
+    />
+    <p
+      v-else
+      :class="classBinding(classObject, 'noOverviewElement', '')"
+    >
       There is no overview for this presentation.
     </p>
   </div>

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

@@ -1,65 +1,84 @@
-<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 { toRefs, computed, provide } from "vue";
+import { sortBy } from "lodash-es";
+import { Position } from "../../../enums/general";
+import type {
+  Presentation,
+  Presenter
+} from "../../../models/conference";
 
-<script>
-import PresentersDetail from '@/components/presenters/PresentersDetail';
+type Props = {
+  presentation: Presentation;
+  itemWidth?: string;
+  layoutFormat?: string;
+  isCompact?: boolean;
+};
 
-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,
-    };
-  },
-  computed: {
-    presenterLevelArray() {
-      let returnArray = [];
-      returnArray['presenters_all'] = { 'presenters': _.sortBy(this.$parent.currentPresentation.presenters, function (presenter) {
-        return presenter.pivot.order;
-      }) };
-      return returnArray;
+const props = withDefaults(defineProps<Props>(), {
+  itemWidth: "120",
+  layoutFormat: "grid",
+  isCompact: true,
+});
+
+const { presentation, isCompact } = toRefs(props);
+
+// 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;
+        }
+      );
     }
-  }
-};
+  return returnArray;
+});
 </script>
 
-<style scoped>
+<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 lang="postcss" scoped>
 .presenter-grid {
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 10px;
+
+  .grid-item {
+    align-items: center;
+    align-self: center;
+  }
 }
-.presenter-grid .grid-item {
-  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'
           : '',
       ]"
     >
@@ -107,7 +107,7 @@ watch(presentation, (_newPresentation: Presentation) => {
               :class="
                 classBinding(classObject, 'sponsorImage', 'block mx-auto')
               "
-            />
+            >
           </a>
         </div>
       </div>
@@ -162,7 +162,7 @@ watch(presentation, (_newPresentation: Presentation) => {
             <img
               :src="sponsor.photo"
               :class="classBinding(classObject, 'trackImage', 'block mx-auto')"
-            />
+            >
           </a>
         </div>
       </div>
@@ -170,7 +170,7 @@ watch(presentation, (_newPresentation: Presentation) => {
     <div
       v-if="
         (sponsorsArray == undefined && trackSponsorsArray == undefined) ||
-        (!sponsorsArray?.length && !trackSponsorsArray?.length)
+          (!sponsorsArray?.length && !trackSponsorsArray?.length)
       "
       :class="
         classBinding(
@@ -195,15 +195,16 @@ watch(presentation, (_newPresentation: Presentation) => {
   </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/presenters/PresenterListing.vue

@@ -8,6 +8,7 @@ import { Position } from "../../enums/general";
 
 type Props = {
   presenter: Presenter;
+  showImg?: boolean;
   enableBio?: boolean;
   showBio?: boolean;
   isSmallGroupedTrack?: boolean;
@@ -20,6 +21,7 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {
   enableBio: true,
+  showImg: true,
   showBio: false,
   isSmallGroupedTrack: false,
   bioLinkOnName: true,
@@ -45,7 +47,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["clicked"]);
 
-const { presenter, enableBio, isSmallGroupedTrack, classObject } =
+const { presenter, showImg, enableBio, isSmallGroupedTrack, classObject } =
   toRefs(props);
 const { fullName, titleCompany } = usePresenter(presenter);
 const { classBinding } = useClassBinding();
@@ -73,7 +75,7 @@ const handleClick = () => {
       ]"
     >
       <div
-        v-if="presenter.photo && imagePosition !== Position.RIGHT"
+        v-if="showImg && presenter.photo && imagePosition !== Position.RIGHT"
         :class="
           classBinding(classObject, 'presenterImageContainer', 'shrink p-2')
         "
@@ -81,7 +83,7 @@ const handleClick = () => {
         <img
           :src="presenter.photo"
           :class="classBinding(classObject, 'presenterImage', '')"
-        />
+        >
       </div>
       <div
         :class="
@@ -98,21 +100,26 @@ const handleClick = () => {
             class="cursor-pointer"
             :class="classBinding(classObject, 'presenterNameLink', '')"
             @click="handleClick()"
-            ><span :class="classBinding(classObject, 'presenterName', '')">
-              {{ fullName }}</span
-            ></a
           >
-          <span v-else :class="classBinding(classObject, 'presenterName', '')">
+            <span :class="classBinding(classObject, 'presenterName', '')">
+              {{ fullName }}
+            </span>
+          </a>
+          <span
+            v-else
+            :class="classBinding(classObject, 'presenterName', '')"
+          >
             {{ fullName }}
           </span>
           <span
             v-if="presenter.role == 'moderator'"
             :class="[
               isSmallGroupedTrack ? 'new-line' : 'no-new-line',
-              classBinding(classObject, 'presenterRole', 'text-grey-dark'),
+              classBinding(classObject, 'presenterRole', 'text-gray-600'),
             ]"
-            >Moderator</span
           >
+            Moderator
+          </span>
           <span
             v-if="titleCompany"
             :class="[
@@ -123,8 +130,9 @@ const handleClick = () => {
                 'font-light paragraph-color-1'
               ),
             ]"
-            >{{ titleCompany }}</span
           >
+            {{ titleCompany }}
+          </span>
         </p>
         <p
           v-if="showBio && presenter.biography"
@@ -136,49 +144,49 @@ const handleClick = () => {
             )
           "
           v-html="presenter.biography"
-        ></p>
-        <div v-if="enableBio && !bioLinkOnName" class="shrink">
+        />
+        <div
+          v-if="enableBio && !bioLinkOnName"
+          class="shrink"
+        >
           <a
             class="cursor-pointer"
             :class="classBinding(classObject, 'presenterBioLink', '')"
             @click="handleClick()"
-            >{{ bioLinkText }}
+          >
+            {{ bioLinkText }}
           </a>
         </div>
       </div>
       <div
-        v-if="presenter.photo && imagePosition === Position.RIGHT"
-        :class="
-          classBinding(classObject, 'presenterImageContainer', 'shrink p-2')
-        "
+        v-if="showImg && presenter.photo && imagePosition === Position.RIGHT"
+        :class="classBinding(classObject, 'presenterImageContainer', 'shrink p-2')"
       >
         <img
           :src="presenter.photo"
           :class="classBinding(classObject, 'presenterImage', '')"
-        />
+        >
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .new-line:before {
-  content: "\a";
+  content: "\a ";
   white-space: pre;
 }
-
 .no-new-line:before {
   content: " - ";
   white-space: normal;
 }
-
-@media (max-width: 991px) {
+@media (max-width: 1023px) {
   .new-line-responsive:before {
-    content: "\a";
+    content: "\a ";
     white-space: pre;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .new-line-responsive:before {
     content: " - ";
     white-space: normal;