@icvdeveloper/common-module 0.0.93 → 0.0.94

package/dist/runtime/components/layouts/Accordion.vue

@@ -1,78 +1,78 @@
-<script lang="ts" setup>
-import { ref, toRefs, computed } from "vue";
-
-type Props = {
-  title?: string;
-  tabContent?: {
-    content?: string;
-    label?: string;
-    type?: string;
-  };
-  contentObject?: object;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "",
-  tabContent: () => ({}),
-  contentObject: () => ({}),
-});
-
-// data
-const { title, tabContent, contentObject } = toRefs(props);
-const active = ref<boolean>(false);
-
-// computed
-const tabTitleValues = computed(() => {
-  if (title.value) {
-    return {
-      title: title.value,
-      classes: "",
-    };
-  } else {
-    return {
-      title: tabContent.value.label,
-      classes: "pl-4",
-    };
-  }
-});
-</script>
-
-<template>
-  <div>
-    <a
-      v-if="tabContent.type === 'url'"
-      :href="tabContent.content"
-      target="_blank"
-      class="py-3 block no-underline w-full font-hairline inline-flex items-center text-md my-1"
-      :class="tabTitleValues.classes"
-    >
-      <span class="flex-initial">
-        {{ tabTitleValues.title }}
-      </span>
-    </a>
-    <a
-      v-else
-      href="#"
-      class="py-3 block no-underline w-full font-hairline inline-flex items-center text-md my-1"
-      :class="tabTitleValues.classes"
-      @click.prevent="active = !active"
-    >
-      <span class="flex-initial"> {{ tabTitleValues.title }}&nbsp;&nbsp; </span>
-      <span
-        v-show="!active"
-        class="font-black flex-initial"
-        style="width: 0.75rem"
-      >
-        <CommonSvgIcon icon="downarrow"></CommonSvgIcon>
-      </span>
-      <span
-        v-show="active"
-        class="font-black flex-initial"
-        style="width: 0.75rem"
-      >
-        <CommonSvgIcon class="invert" icon="downarrow"></CommonSvgIcon>
-      </span>
-    </a>
-    <div v-show="active"><slot /></div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+
+type Props = {
+  title?: string;
+  tabContent?: {
+    content?: string;
+    label?: string;
+    type?: string;
+  };
+  contentObject?: object;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  tabContent: () => ({}),
+  contentObject: () => ({}),
+});
+
+// data
+const { title, tabContent, contentObject } = toRefs(props);
+const active = ref<boolean>(false);
+
+// computed
+const tabTitleValues = computed(() => {
+  if (title.value) {
+    return {
+      title: title.value,
+      classes: "",
+    };
+  } else {
+    return {
+      title: tabContent.value.label,
+      classes: "pl-4",
+    };
+  }
+});
+</script>
+
+<template>
+  <div>
+    <a
+      v-if="tabContent.type === 'url'"
+      :href="tabContent.content"
+      target="_blank"
+      class="py-3 block no-underline w-full font-hairline inline-flex items-center text-md my-1"
+      :class="tabTitleValues.classes"
+    >
+      <span class="flex-initial">
+        {{ tabTitleValues.title }}
+      </span>
+    </a>
+    <a
+      v-else
+      href="#"
+      class="py-3 block no-underline w-full font-hairline inline-flex items-center text-md my-1"
+      :class="tabTitleValues.classes"
+      @click.prevent="active = !active"
+    >
+      <span class="flex-initial"> {{ tabTitleValues.title }}&nbsp;&nbsp; </span>
+      <span
+        v-show="!active"
+        class="font-black flex-initial"
+        style="width: 0.75rem"
+      >
+        <CommonSvgIcon icon="downarrow"></CommonSvgIcon>
+      </span>
+      <span
+        v-show="active"
+        class="font-black flex-initial"
+        style="width: 0.75rem"
+      >
+        <CommonSvgIcon class="invert" icon="downarrow"></CommonSvgIcon>
+      </span>
+    </a>
+    <div v-show="active"><slot /></div>
+  </div>
+</template>

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

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+import { storeToRefs } from "pinia";
+import { useClassBinding } from "../../composables/useClassBinding";
+import { Conference, Presentation } from "../../models/conference";
+import { SelectedContent } from "../../enums/general";
+import { usePresentationsStore } from "../../store/presentations";
+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 { classBinding } = useClassBinding();
+
+const { selectedContent } = storeToRefs(usePresentationsStore());
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', 'flex flex-col w-full')">
+    <!-- NO TABS -->
+    <div
+      v-if="!tabs.length"
+      :class="
+        classBinding(
+          classObject,
+          'noTabsContainer',
+          'container mx-auto flex flex-col text-center pt-6'
+        )
+      "
+    >
+      <div :class="classBinding(classObject, 'noTabsChild', 'flex-1')">
+        <CommonComponentsArchiveMediaContainer
+          :class="
+            classBinding(
+              classObject,
+              'classObject.components.mediaContainer.container',
+              'flex-1 aspect-video'
+            )
+          "
+          :presentation="presentation"
+          :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'
+            )
+          "
+        >
+          <CommonComponentsArchiveMediaContainer
+            class="w-full"
+            :presentation="presentation"
+            :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>

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

@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import { toRefs, computed, watch, onMounted, nextTick } from "vue";
+import { get } from "lodash-es";
+import { Presentation, PlayerObj } from "../../models/conference";
+import { WebcastPlayerClassObj } from "../../@types/components";
+import { useClassBinding } from "../../composables/useClassBinding";
+
+type Props = {
+  presentation: Presentation;
+  playing?: boolean;
+  classObject?: WebcastPlayerClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  playing: true,
+  classObject: () => {
+    return {
+      container: "",
+      playerElement: "",
+      embedElement: "",
+    };
+  },
+});
+
+const { presentation, playing } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
+// data
+let icvPlayerObj: PlayerObj = {
+  autostart: false,
+  format: "hls",
+  playerDiv: "mediaPlayer",
+};
+let timeInterval: NodeJS.Timer | null = null;
+
+// emits
+const emit = defineEmits<{
+  (event: "time", value: Number): void;
+}>();
+
+// computed
+const isHtml = computed(() => {
+  return presentation.value.type === "embed";
+});
+
+const isFile = computed(() => {
+  const mediaTypeArray = ["video", "audio", "video_slide", "audio_slide"];
+  return mediaTypeArray.indexOf(get(presentation.value, "type")) >= 0;
+});
+
+// methods
+const playStream = () => {
+  if (isFile.value) {
+    icvPlayerObj.format = ["audio", "audio_slide"].includes(
+      String(presentation.value.type)
+    )
+      ? "audio"
+      : "video";
+    icvPlayerObj.loadCustomStream({
+      file: get(presentation.value, "video_url"),
+    });
+  }
+};
+
+const setupMediaPlayer = () => {
+  if (icvPlayerObj) {
+    icvPlayerObj = <PlayerObj>{};
+  }
+  if (isFile.value) {
+    nextTick(() => {
+      icvPlayerObj = new window.ICVDMStreamPlayer();
+      icvPlayerObj.format = String(presentation.value.type);
+      icvPlayerObj.playerDiv = "mediaPlayer";
+      icvPlayerObj.addTrack(get(presentation.value, "captions_url"));
+      icvPlayerObj.getPosition();
+      icvPlayerObj.autostart = true;
+      playStream();
+    });
+  }
+};
+
+const checkStreamTime = () => {
+  if (icvPlayerObj) {
+    if (!playing.value) {
+      stop();
+      return;
+    }
+    emit("time", icvPlayerObj.getPosition());
+  }
+};
+
+const seek = (_time) => {
+  if (icvPlayerObj && isFile) {
+    icvPlayerObj.seek(_time);
+  }
+};
+
+const stop = () => {
+  if (icvPlayerObj && isFile) {
+    icvPlayerObj.stop();
+  }
+};
+
+const remove = () => {
+  if (icvPlayerObj && isFile) {
+    icvPlayerObj.remove();
+  }
+};
+
+const cleanup = () => {
+  if (icvPlayerObj) {
+    stop();
+    remove();
+    icvPlayerObj = <PlayerObj>{};
+  }
+  clearInterval(timeInterval);
+};
+
+// watchers
+watch(
+  presentation,
+  (_oldPresentation: Presentation, _newPresentation: Presentation) => {
+    if (_oldPresentation.type !== _newPresentation.type) {
+      setupMediaPlayer();
+    }
+  }
+);
+
+// on mount
+// @todo figure out why ICVDMStreamPlayer doesn't load when loadScripts is run asynchroniously
+onMounted(() => {
+  const _script = document.createElement("script");
+  _script.setAttribute(
+    "src",
+    "https://cdn.v3mediaportal.com/streaming-player/js/icvdm.player.min.js?_id=75"
+  );
+  document.head.appendChild(_script);
+  _script.onload = () => {
+    if (get(window, "ICVDMStreamPlayer", false)) {
+      setupMediaPlayer();
+      timeInterval = setInterval(checkStreamTime, 1000);
+    }
+  };
+});
+
+onBeforeRouteLeave(() => {
+  cleanup();
+});
+</script>
+
+<template>
+  <div
+    id="archive-player-container"
+    :class="classBinding(classObject, 'container', 'text-center')"
+  >
+    <div
+      v-if="isFile"
+      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%;
+}
+</style>