@icvdeveloper/common-module 0.0.75 → 0.0.78

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "v3plus-common-module",
   "configKey": "v3plusCommonModule",
-  "version": "0.0.75"
+  "version": "0.0.78"
 }

package/dist/module.mjs

@@ -155,6 +155,11 @@ const module = defineNuxtModule({
       extensions: ["vue"],
       prefix: "Common"
     });
+    addComponentsDir({
+      path: join(runtimeDir, "components/media"),
+      extensions: ["vue"],
+      prefix: "Common"
+    });
     nuxt.hook("app:resolve", async (nuxt2) => {
       let index = 0;
       const piniaRuntime = nuxt2.plugins.find((object, i) => {

package/dist/runtime/@types/components.d.ts

@@ -102,7 +102,7 @@ export type presenterModalClassObj = {
 export type uccClassObj = {
     container?: string | null;
 };
-export type accordionCompObj<svgIconClassObj> = {
+export type accordionCompObj = {
     svgIcon?: svgIconClassObj;
 };
 export type accordionClassObj = {
@@ -121,3 +121,91 @@ export type faqAccordionClassObj = {
     container?: string | null;
     components?: faqAccordionCompObj;
 };
+export type AgendaListAccordionClassObj = {
+    container?: string | null;
+    headerContainer?: string | null;
+    headerButton?: string | null;
+    dropdownContainer?: string | null;
+};
+export type AgendaListCompObj = {
+    agendaListAccordion?: AgendaListAccordionClassObj;
+};
+export type AgendaListClassObj = {
+    container?: string | null;
+    accordionContainer?: string | null;
+    titleContainer?: string | null;
+    timeElement?: string | null;
+    iconContainer?: string | null;
+    dropdownContainer?: string | null;
+    marginElement?: string | null;
+    presentersContainer?: string | null;
+    presentersHeader?: string | null;
+    presenterListContainer?: string | null;
+    presenterElement: string | null;
+    presenterName?: string | null;
+    components?: AgendaListCompObj;
+};
+export type AgendaPanelCompObj = {
+    agendaList?: AgendaListClassObj;
+};
+export type AgendaPanelClassObj = {
+    container?: string | null;
+    components?: AgendaPanelCompObj;
+};
+export type OverviewPanelClassObj = {
+    container?: string | null;
+    htmlElement?: string | null;
+    noOverviewElement?: string | null;
+};
+export type ContentTabsClassObj = {
+    container?: string | null;
+    fullContainer?: string | null;
+    mobileContainer?: string | null;
+    mobileButtonContainer?: string | null;
+    dropdownContainer?: string | null;
+    tabList?: string | null;
+    tabItem?: string | null;
+    tabLink?: string | null;
+    selectedTab?: string | null;
+    mobileTabList?: string | null;
+    mobileTabItem?: string | null;
+    mobileTabLink?: string | null;
+};
+export type WebcastPlayerClassObj = {
+    container?: string | null;
+    playerElement?: string | null;
+    embedElement?: string | null;
+};
+export type MediaContainerCompObj = {
+    webcastPlayer?: WebcastPlayerClassObj;
+};
+export type MediaContainerClassObj = {
+    container?: string | null;
+    components?: MediaContainerCompObj;
+};
+export type ContentAreaCompObj = {
+    overviewPanel?: OverviewPanelClassObj;
+    agendaPanel?: AgendaPanelClassObj;
+};
+export type ContentAreaClassObj = {
+    container?: string | null;
+    htmlElement?: string | null;
+    trackHtmlElement?: string | null;
+    noTrackHtmlElement?: string | null;
+    noTrackHtmlText?: string | null;
+    components?: ContentAreaCompObj;
+};
+export type PlayerAndContentCompObj = {
+    contentTabs?: ContentTabsClassObj;
+    contentArea?: ContentAreaClassObj;
+    mediaContainer?: MediaContainerClassObj;
+};
+export type PlayerAndContentClassObj = {
+    container?: string | null;
+    noTabsContainer?: string | null;
+    noTabsChild?: string | null;
+    withTabsContainer?: string | null;
+    withTabsChild?: string | null;
+    mediaTabsContainer?: string | null;
+    components?: PlayerAndContentCompObj;
+};

package/dist/runtime/components/agenda/AgendaList.vue

@@ -1,24 +1,52 @@
 <script lang="ts" setup>
-import { toRefs, computed, onBeforeMount, reactive } from "vue";
+import { toRefs } from "vue";
 import { add } from "date-fns";
-import { e } from "ofetch/dist/error-8a55452d";
 import type { Conference } from "../../models/conference";
 import { useAgenda } from "../../composables/useAgenda";
 import { useDateFormat } from "../../composables/useDateFormat";
 import { usePresenter } from "../../composables/usePresenter";
+import { useClassBinding } from "../../composables/useClassBinding";
 import { Presenter } from "../../models/conference";
+import {
+  AgendaListClassObj,
+  AgendaListCompObj,
+  AgendaListAccordionClassObj,
+} from "../../@types/components";
 import AgendaAccordion from "./components/AgendaListAccordion.vue";
+import Calendar from "./components/Calendar.vue";
 
 type Props = {
   conference: Conference;
+  classObject?: AgendaListClassObj;
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      accordionContainer: "",
+      titleContainer: "",
+      timeElement: "",
+      iconContainer: "",
+      dropdownContainer: "",
+      marginElement: "",
+      presentersContainer: "",
+      presentersHeader: "",
+      presenterListContainer: "",
+      presenterElement: "",
+      presenterName: "",
+      components: ref<AgendaListCompObj>({
+        agendaListAccordion: ref<AgendaListAccordionClassObj>({}),
+      }),
+    };
+  },
+});
 
 const { conference } = toRefs(props);
 
 const { days, getCombinedTrackList } = useAgenda(conference);
 const { formatTimezoneToLocal } = useDateFormat();
+const { classBinding } = useClassBinding();
 
 const presentersToComposables = (presenters: Presenter[]) => {
   const data = [];
@@ -35,14 +63,40 @@ const presentersToComposables = (presenters: Presenter[]) => {
 </script>
 
 <template>
-  <div class="flex flex-col space-y-5 text-neutral-700">
+  <div
+    :class="
+      classBinding(
+        classObject,
+        'container',
+        'flex flex-col space-y-5 text-neutral-700'
+      )
+    "
+  >
     <template v-for="day in days">
       <template v-for="track in getCombinedTrackList(day)">
-        <div v-for="presentation in track.presentations" :key="presentation.id">
-          <AgendaAccordion>
+        <div
+          v-for="presentation in track.presentations"
+          :key="presentation.id"
+          :class="classBinding(classObject, 'accordionContainer', '')"
+        >
+          <AgendaAccordion
+            :class-object="classObject.components.agendaListAccordion"
+          >
             <template #header="isExpanded">
-              <div class="text-left text-xl flex-col md:flex-row flex">
-                <span class="time-width">
+              <div
+                :class="
+                  classBinding(
+                    classObject,
+                    'titleContainer',
+                    'text-left text-xl flex-col md:flex-row flex'
+                  )
+                "
+              >
+                <span
+                  :class="
+                    classBinding(classObject, 'timeElement', 'time-width')
+                  "
+                >
                   {{
                     formatTimezoneToLocal(
                       presentation.date,
@@ -61,7 +115,15 @@ const presentersToComposables = (presenters: Presenter[]) => {
                     )
                   }}
                 </span>
-                <span class="flex flex-row md:ml-5">
+                <span
+                  :class="
+                    classBinding(
+                      classObject,
+                      'iconContainer',
+                      'flex flex-row md:ml-5'
+                    )
+                  "
+                >
                   <CommonSvgIcon
                     :class-object="{ svgElement: 'fill-neutral-700' }"
                     class="mr-1 pt-1"
@@ -72,23 +134,91 @@ const presentersToComposables = (presenters: Presenter[]) => {
               </div>
             </template>
             <template #body>
-              <div class="flex flex-row">
+              <div
+                :class="
+                  classBinding(
+                    classObject,
+                    'dropdownContainer',
+                    'flex flex-row'
+                  )
+                "
+              >
                 <!-- left margin element -->
-                <span class="text-lg hidden md:block md:flex-initial time-width md:mr-8" />
-
-                <div class="flex-1 my-3">
-                  <h3 class="font-bold text-lg">Presenters</h3>
-                  <div class="flex flex-col space-y-3">
+                <span
+                  :class="
+                    classBinding(
+                      classObject,
+                      'marginElement',
+                      'text-lg hidden md:block md:flex-initial time-width md:mr-8'
+                    )
+                  "
+                />
+                <div
+                  :class="
+                    classBinding(
+                      classObject,
+                      'presentersContainer',
+                      'flex-1 my-3'
+                    )
+                  "
+                >
+                  <!-- ADD TO CALENDAR -->
+                  <calendar
+                    :key="conference.id"
+                    class="mb-3"
+                    :presentation="presentation"
+                    :conference="conference"
+                  />
+                  <h3
+                    :class="
+                      classBinding(
+                        classObject,
+                        'presentersHeader',
+                        'font-bold text-lg'
+                      )
+                    "
+                  >
+                    Presenters
+                  </h3>
+                  <div
+                    :class="
+                      classBinding(
+                        classObject,
+                        'presenterListContainer',
+                        'flex flex-col space-y-3'
+                      )
+                    "
+                  >
                     <div
                       v-for="presenter in presentersToComposables(
                         presentation.presenters
                       )"
                       :key="presenter.presenter.id"
+                      :class="classBinding(classObject, 'presenterElement', '')"
                     >
-                        <p class="text-lg pb-0 mb-0">{{ presenter.fullName.value }}</p>
-                        <p v-if="presenter.titleCompany.value" class="text-sm pt-0 mb-1">
-                          {{ presenter.titleCompany.value }}
-                        </p>
+                      <p
+                        :class="
+                          classBinding(
+                            classObject,
+                            'presenterName',
+                            'text-lg pb-0 mb-0'
+                          )
+                        "
+                      >
+                        {{ presenter.fullName.value }}
+                      </p>
+                      <p
+                        v-if="presenter.titleCompany.value"
+                        :class="
+                          classBinding(
+                            classObject,
+                            'presenterName',
+                            'text-sm pt-0 mb-1'
+                          )
+                        "
+                      >
+                        {{ presenter.titleCompany.value }}
+                      </p>
                     </div>
                   </div>
                 </div>

package/dist/runtime/components/agenda/AgendaTabbed.vue

@@ -9,6 +9,7 @@ import { usePresenters } from "../../composables/usePresenters";
 import CommonAccordion from "../layouts/Accordion.vue";
 import Sponsor from "./components/Sponsor.vue";
 import PresentationLink from "./components/PresentationLink.vue";
+import Calendar from "./components/Calendar.vue";
 
 type Props = {
   conference: Conference;
@@ -246,6 +247,14 @@ const presentersContainer = computed(() => {
                         ></presentation-link>
                       </div>
 
+                      <!-- ADD TO CALENDAR -->
+                      <calendar
+                        :key="conference.id"
+                        class="mb-3"
+                        :presentation="presentation"
+                        :conference="conference"
+                      />
+
                       <!-- PRESENTERS LIST (ACCORDION OR STANDARD/DIV) -->
                       <component
                         :is="presentersContainer"

package/dist/runtime/components/agenda/components/AgendaListAccordion.vue

@@ -1,5 +1,24 @@
 <script lang="ts" setup>
 import { ref } from "vue";
+import { useClassBinding } from "../../../composables/useClassBinding";
+import { AgendaListAccordionClassObj } from "../../../@types/components";
+
+type Props = {
+  classObject?: AgendaListAccordionClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      headerContainer: "",
+      headerButton: "",
+      dropdownContainer: "",
+    };
+  },
+});
+
+const { classBinding } = useClassBinding();
 
 const expanded = ref<boolean>(false);
 
@@ -10,15 +29,23 @@ const toggle = () => {
 </script>
 
 <template>
-  <div>
-    <div class="font-bold mt-2">
-      <button class="outline-none" @click="toggle">
+  <div :class="classBinding(classObject, 'container', '')">
+    <div
+      :class="classBinding(classObject, 'headerContainer', 'font-bold mt-2')"
+    >
+      <button
+        :class="classBinding(classObject, 'headerButton', 'outline-none')"
+        @click="toggle"
+      >
         <slot name="header"></slot>
       </button>
     </div>
 
     <transition name="slide" mode="out-in">
-      <div v-show="expanded">
+      <div
+        v-show="expanded"
+        :class="classBinding(classObject, 'dropdownContainer', '')"
+      >
         <slot name="body" />
       </div>
     </transition>

package/dist/runtime/components/agenda/components/Calendar.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { get } from "lodash-es";
+import { DateTime } from 'luxon';
+import { useTemplateConfigsStore } from "../../../store";
+import 'add-to-calendar-button';
+import { Conference } from "../../../models/conference";
+import { Presentation } from "../../../models/conference";
+
+type Props = {
+  conference: Conference;
+  presentation: Presentation;
+};
+
+const props = defineProps<Props>();
+
+const { conference, presentation } = toRefs(props);
+
+const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
+
+// Computed
+const showAddToGoogleCalendar = computed((): boolean => {
+    return pagesConfigValue.value("agenda.add_to_google_calendar", false);
+});
+  
+const showAddToMicrosoftCalendar = computed((): boolean => {
+  return pagesConfigValue.value("agenda.add_to_microsoft_calendar", false);
+});
+
+const presStartDate = computed((): string => {
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).toFormat("yyyy-MM-dd");
+});
+
+const presStartTime = computed((): string => {
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).toFormat("HH:mm");
+});
+
+const presEndTime = computed((): string => {
+  let duration: number = get(presentation.value, "duration", 3600) // default to 60 min
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).plus(duration * 1000).toFormat("HH:mm");
+});
+
+const calendarOptions = computed((): string => {
+  let opts = [];
+  if (showAddToGoogleCalendar) { opts.push('Google'); }
+  if (showAddToMicrosoftCalendar) { opts.push('iCal'); }
+  let optsQuoted = opts.map(opt => `'${opt}'`);
+  return optsQuoted.join(',');
+});
+
+const cssPath = computed((): string => {
+  // atcb.css required in template/playground public folder
+  return window.location.origin + "/atcb.css";
+});
+
+</script>
+
+<template>
+  <div>
+    <add-to-calendar-button 
+      :name="presentation.name"
+      :description="presentation.description"
+      :startDate="presStartDate"
+      :startTime="presStartTime"
+      :endTime="presEndTime"
+      :timeZone="conference.timezone"
+      :location="conference.location"
+      listStyle="dropdown"
+      trigger="click"
+      lightMode="bodyScheme"
+      buttonStyle="custom"
+      :customCss="cssPath"
+      hideIconButton
+      hideBackground
+      hideCheckmark
+      :options="calendarOptions"
+    ></add-to-calendar-button>
+  </div>
+</template>

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

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
+import { useClassBinding } from "../../composables/useClassBinding";
+import { Conference, Presentation } from "../../models/conference";
+import { SelectedContent } from "../../enums/general";
+import {
+  PlayerAndContentClassObj,
+  PlayerAndContentCompObj,
+  ContentTabsClassObj,
+  ContentAreaClassObj,
+  MediaContainerClassObj,
+} from "../../@types/components";
+
+type Props = {
+  conference: Conference;
+  presentation: Presentation;
+  tabs?: Array<{ label: string; type: SelectedContent; content: string }>;
+  classObject?: PlayerAndContentClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  tabs: () => {
+    return [
+      { label: "Overview", type: SelectedContent.OVERVIEW, content: "string" },
+    ];
+  },
+  classObject: () => {
+    return {
+      container: "",
+      noTabsContainer: "",
+      noTabsChild: "",
+      withTabsContainer: "",
+      withTabsChild: "",
+      mediaTabsContainer: "",
+      components: ref<PlayerAndContentCompObj>({
+        contentTabs: ref<ContentTabsClassObj>({}),
+        contentArea: ref<ContentAreaClassObj>({}),
+        mediaContainer: ref<MediaContainerClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { conference, presentation } = toRefs(props);
+
+const route = ref(useRoute());
+
+const { classBinding } = useClassBinding();
+
+const { selectedContent } = storeToRefs(usePresentationsStore());
+const { isLoggedIn } = storeToRefs(useAuthStore());
+
+// computed
+
+const isStreamTest = computed((): boolean => {
+  return String(route.value.name).includes("stream-test");
+});
+
+const hasAccess = computed((): boolean => {
+  return isLoggedIn.value && conference.value.access;
+});
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', 'flex flex-col w-full')">
+    <!-- NO TABS -->
+    <div
+      v-if="isStreamTest || (hasAccess && !tabs.length)"
+      :class="
+        classBinding(
+          classObject,
+          'noTabsContainer',
+          'container mx-auto flex flex-col text-center pt-6'
+        )
+      "
+    >
+      <div :class="classBinding(classObject, 'noTabsChild', 'flex-1')">
+        <CommonComponentsMediaContainer
+          :class="
+            classBinding(
+              classObject,
+              'classObject.components.mediaContainer.container',
+              'flex-1 aspect-video'
+            )
+          "
+          :webcast-conference="conference"
+          :class-object="classObject.components.mediaContainer"
+        />
+      </div>
+    </div>
+
+    <!-- TABS -->
+    <div v-else :class="classBinding(classObject, 'withTabsContainer', '')">
+      <CommonComponentsContentTabs
+        :class="
+          classBinding(
+            classObject,
+            'classObject.components.contentTabs.container',
+            'hidden md:block'
+          )
+        "
+        :webcast-conference="conference"
+        :items="tabs"
+        :class-object="classObject.components.contentTabs"
+      />
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'withTabsChild',
+            'flex-1 grid grid-cols-7 grid-rows-2 gap-y-4'
+          )
+        "
+      >
+        <div
+          :class="
+            classBinding(
+              classObject,
+              'MediaTabsContainer',
+              'col-span-7 row-span-1 md:col-span-4 lg:col-span-5 aspect-video'
+            )
+          "
+        >
+          <CommonComponentsMediaContainer
+            class="w-full"
+            :webcast-conference="conference"
+            :class-object="classObject.components.mediaContainer"
+          />
+          <CommonComponentsContentTabs
+            class="block md:hidden"
+            :webcast-conference="conference"
+            :items="tabs"
+            :class-object="classObject.components.contentTabs"
+          />
+        </div>
+        <CommonComponentsContentArea
+          class="col-span-7 row-span-1 md:col-span-3 lg:col-span-2 border ml-0 md:ml-6"
+          :selected-content="selectedContent"
+          :webcast-conference="conference"
+          :presentation="presentation"
+          :class-object="classObject.components.contentArea"
+        />
+        <!-- sponsor -->
+        <figure
+          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"
+        >
+          <h3
+            v-if="conference.affiliates.length > 0"
+            class="allsmallcaps text-sm pb-4 text-neutral-400 scala"
+          >
+            Sponsored by:
+          </h3>
+          <template v-for="affiliate in conference.affiliates">
+            <CommonComponentsSponsor
+              v-if="affiliate.role == 'sponsor'"
+              :key="affiliate.id"
+              :sponsor="affiliate"
+              :class-object="{
+                labelImageContainer: 'block',
+                sponsorContainer: 'img-mx-auto',
+              }"
+            />
+          </template>
+        </figure>
+      </div>
+    </div>
+  </div>
+</template>