@icvdeveloper/common-module 0.0.122 → 0.0.124

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

@@ -1,178 +1,178 @@
-<script lang="ts" setup>
-import { ref, toRefs, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
-import { useEvents } from "../../composables/useEvents";
-import { useClassBinding } from "../../composables/useClassBinding";
-import { Conference, Presentation } from "../../models/conference";
-import { SelectedContent } from "../../enums/general";
-import { usePresentationsStore } from "../../store/presentations";
-import { useAuthStore } from "../../store/auth";
-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 { getSponsors } = useEvents();
-
-const { selectedContent } = storeToRefs(usePresentationsStore());
-const { isLoggedIn } = storeToRefs(useAuthStore());
-
-// computed
-
-const isStreamTest = computed((): boolean => {
-  return (
-    route.value.params.channelid === "stream-test" ||
-    String(route.value.name) === "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"
-        >
-          <template
-            v-for="(affiliate, index) in getSponsors(conference.affiliates)"
-            :key="index"
-          >
-            <h3
-              v-if="index === 0"
-              :class="classBinding(classObject, 'sponsoredByText', 'hidden')"
-            >
-              Sponsored by:
-            </h3>
-            <CommonComponentsSponsor
-              :sponsor="affiliate"
-              :class-object="{
-                labelImageContainer: 'block',
-                sponsorContainer: 'img-mx-auto',
-              }"
-            />
-          </template>
-        </figure>
-      </div>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
+import { useEvents } from "../../composables/useEvents";
+import { useClassBinding } from "../../composables/useClassBinding";
+import { Conference, Presentation } from "../../models/conference";
+import { SelectedContent } from "../../enums/general";
+import { usePresentationsStore } from "../../store/presentations";
+import { useAuthStore } from "../../store/auth";
+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 { getSponsors } = useEvents();
+
+const { selectedContent } = storeToRefs(usePresentationsStore());
+const { isLoggedIn } = storeToRefs(useAuthStore());
+
+// computed
+
+const isStreamTest = computed((): boolean => {
+  return (
+    route.value.params.channelid === "stream-test" ||
+    String(route.value.name) === "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"
+        >
+          <template
+            v-for="(affiliate, index) in getSponsors(conference.affiliates)"
+            :key="index"
+          >
+            <h3
+              v-if="index === 0"
+              :class="classBinding(classObject, 'sponsoredByText', 'hidden')"
+            >
+              Sponsored by:
+            </h3>
+            <CommonComponentsSponsor
+              :sponsor="affiliate"
+              :class-object="{
+                labelImageContainer: 'block',
+                sponsorContainer: 'img-mx-auto',
+              }"
+            />
+          </template>
+        </figure>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -1,172 +1,140 @@
-<script lang="ts" setup>
-import { ref, toRefs, computed, watch, onMounted, nextTick } from "vue";
-import { get } from "lodash-es";
-import { DateTime } from "luxon";
-import { Presentation, Stream, PlayerObj } from "../../models/conference";
-import { WebcastPlayerClassObj } from "../../@types/components";
-import { useScripts } from "../../composables/useScripts";
-import { useClassBinding } from "../../composables/useClassBinding";
-
-type Props = {
-  stream: Stream;
-  presentation: Presentation;
-  classObject?: WebcastPlayerClassObj;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  classObject: () => {
-    return {
-      container: "",
-      playerElement: "",
-      embedElement: "",
-    };
-  },
-});
-
-const { stream, presentation } = toRefs(props);
-
-const { loadScripts } = useScripts();
-const { classBinding } = useClassBinding();
-
-// data
-let icvPlayerObj: PlayerObj = {
-  autostart: false,
-  format: "hls",
-  playerDiv: "mediaPlayer",
-  loadCustomStream: () => {},
-};
-const timeInterval = ref<NodeJS.Timer | null>(null);
-
-// emits
-const emit = defineEmits<{
-  (event: "time", value: Number): void;
-}>();
-
-// computed
-const isHtml = computed(() => {
-  return stream.value.type === "embed";
-});
-
-const isHls = computed(() => {
-  return stream.value.type === "hls";
-});
-
-// methods
-const setupMediaPlayer = () => {
-  if (icvPlayerObj) {
-    icvPlayerObj = <PlayerObj>{};
-  }
-  if (isHls.value) {
-    nextTick(() => {
-      icvPlayerObj = new window.ICVDMStreamPlayer();
-      icvPlayerObj.format = stream.value.type;
-      icvPlayerObj.playerDiv = "mediaPlayer";
-      icvPlayerObj.autostart = true;
-      playStream();
-    });
-  }
-};
-
-const playStream = () => {
-  if (isHls.value) {
-    icvPlayerObj.format = ["audio", "audio_slide"].includes(stream.value.type)
-      ? "audio"
-      : "video";
-    icvPlayerObj.loadCustomStream({
-      file: stream.value.hls_url,
-    });
-  }
-};
-
-const checkStreamTime = () => {
-  const defaultStreamUt = DateTime.now().toUnixInteger() - 40;
-  const maxStreamDelay = defaultStreamUt - 20;
-  let streamUt = get(icvPlayerObj, "stream_ut", defaultStreamUt);
-
-  if (streamUt > maxStreamDelay) {
-    streamUt = defaultStreamUt;
-  }
-  emit("time", streamUt);
-};
-
-const cleanup = () => {
-  if (icvPlayerObj) {
-    icvPlayerObj = <PlayerObj>{};
-  }
-  clearInterval(timeInterval.value);
-};
-
-// watchers
-
-watch(
-  presentation,
-  (_oldPresentation: Presentation, _newPresentation: Presentation) => {
-    if (_oldPresentation.type !== _newPresentation.type) {
-      setupMediaPlayer();
-    }
-  }
-);
-
-watch(stream, (_oldStream, _newStream) => {
-  if (_oldStream !== _newStream) {
-    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.value = setInterval(() => {
-        checkStreamTime();
-      }, 1000);
-    }
-  };
-});
-onUnmounted(() => {
-  cleanup();
-});
-</script>
-
-<template>
-  <div
-    id="webcast-player-container"
-    :class="classBinding(classObject, 'container', 'text-center')"
-  >
-    <div
-      v-if="isHls"
-      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%;
-}
-</style>
+<script lang="ts" setup>
+import { ref, toRefs, computed, watch, onMounted, nextTick } from "vue";
+import { get } from "lodash-es";
+import { Presentation, Stream, PlayerObj } from "../../models/conference";
+import { WebcastPlayerClassObj } from "../../@types/components";
+import { useScripts } from "../../composables/useScripts";
+import { useClassBinding } from "../../composables/useClassBinding";
+
+type Props = {
+  stream: Stream;
+  presentation: Presentation;
+  classObject?: WebcastPlayerClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      playerElement: "",
+      embedElement: "",
+    };
+  },
+});
+
+const { stream, presentation } = toRefs(props);
+
+const { loadScripts } = useScripts();
+const { classBinding } = useClassBinding();
+
+// data
+let icvPlayerObj: PlayerObj = {
+  autostart: false,
+  format: "hls",
+  playerDiv: "mediaPlayer",
+  loadCustomStream: () => {},
+};
+
+// computed
+const isHtml = computed(() => {
+  return stream.value.type === "embed";
+});
+
+const isHls = computed(() => {
+  return stream.value.type === "hls";
+});
+
+// methods
+const setupMediaPlayer = () => {
+  if (icvPlayerObj) {
+    icvPlayerObj = <PlayerObj>{};
+  }
+  if (isHls.value) {
+    nextTick(() => {
+      icvPlayerObj = new window.ICVDMStreamPlayer();
+      icvPlayerObj.format = stream.value.type;
+      icvPlayerObj.playerDiv = "mediaPlayer";
+      icvPlayerObj.autostart = true;
+      playStream();
+    });
+  }
+};
+
+const playStream = () => {
+  if (isHls.value) {
+    icvPlayerObj.format = ["audio", "audio_slide"].includes(stream.value.type)
+      ? "audio"
+      : "video";
+    icvPlayerObj.loadCustomStream({
+      file: stream.value.hls_url,
+    });
+  }
+};
+
+// watchers
+watch(
+  presentation,
+  (_oldPresentation: Presentation, _newPresentation: Presentation) => {
+    if (_oldPresentation.type !== _newPresentation.type) {
+      setupMediaPlayer();
+    }
+  }
+);
+
+watch(stream, (_oldStream, _newStream) => {
+  if (_oldStream !== _newStream) {
+    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();
+    }
+  };
+});
+</script>
+
+<template>
+  <div
+    id="webcast-player-container"
+    :class="classBinding(classObject, 'container', 'text-center')"
+  >
+    <div
+      v-if="isHls"
+      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%;
+}
+</style>