@icvdeveloper/common-module 0.0.93 → 0.0.94

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

@@ -1,167 +1,167 @@
-<script lang="ts" setup>
-import { toRefs, computed, watch, onMounted, nextTick } from "vue";
-import { get } from "lodash-es";
-import { getUnixTime } from "date-fns";
-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: () => {},
-};
-let timeInterval: 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 = getUnixTime(Date.now()) - 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);
-};
-
-// 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 = setInterval(checkStreamTime, 1000);
-    }
-  };
-});
-</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 { toRefs, computed, watch, onMounted, nextTick } from "vue";
+import { get } from "lodash-es";
+import { getUnixTime } from "date-fns";
+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: () => {},
+};
+let timeInterval: 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 = getUnixTime(Date.now()) - 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);
+};
+
+// 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 = setInterval(checkStreamTime, 1000);
+    }
+  };
+});
+</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>

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

@@ -1,45 +1,45 @@
-<script lang="ts" setup>
-import { ref, toRefs } from "vue";
-import { Conference } from "../../../models/conference";
-import {
-  AgendaPanelClassObj,
-  AgendaPanelCompObj,
-  AgendaListClassObj,
-} from "../../../@types/components";
-import { useClassBinding } from "../../../composables/useClassBinding";
-
-type Props = {
-  conference: Conference | null;
-  classObject?: AgendaPanelClassObj;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  classObject: () => {
-    return {
-      container: "",
-      components: ref<AgendaPanelCompObj>({
-        agendaList: ref<AgendaListClassObj>({}),
-      }),
-    };
-  },
-});
-
-const { conference } = toRefs(props);
-
-const { classBinding } = useClassBinding();
-</script>
-
-<template>
-  <div :class="classBinding(classObject, 'container', '')">
-    <CommonAgendaList
-      :use-calendar="false"
-      :conference="conference"
-      :class-object="classObject.components.agendaList"
-      style="margin-top: 0; margin-bottom: 0; border: none"
-    />
-  </div>
-</template>
-
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+import { Conference } from "../../../models/conference";
+import {
+  AgendaPanelClassObj,
+  AgendaPanelCompObj,
+  AgendaListClassObj,
+} from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
+
+type Props = {
+  conference: Conference | null;
+  classObject?: AgendaPanelClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      components: ref<AgendaPanelCompObj>({
+        agendaList: ref<AgendaListClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { conference } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', '')">
+    <CommonAgendaList
+      :use-calendar="false"
+      :conference="conference"
+      :class-object="classObject.components.agendaList"
+      style="margin-top: 0; margin-bottom: 0; border: none"
+    />
+  </div>
+</template>
+
 <style scoped>
 .sponsor-grid {
   display: grid;
@@ -51,4 +51,4 @@ const { classBinding } = useClassBinding();
   align-self: center;
   justify-self: center;
 }
-</style>
+</style>

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

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { ref, toRefs } from "vue";
+import { storeToRefs } from "pinia";
+import { useTemplateConfigsStore, useAuthStore } from "../../../store";
+import { Presentation } from "../../../models/conference";
+import {
+  MediaContainerClassObj,
+  MediaContainerCompObj,
+  WebcastPlayerClassObj,
+} from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
+
+type Props = {
+  presentation: Presentation;
+  classObject?: MediaContainerClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      components: ref<MediaContainerCompObj>({
+        webcastPlayer: ref<WebcastPlayerClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { presentation } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
+const { isLoggedIn } = storeToRefs(useAuthStore());
+const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
+
+// emits
+const emit = defineEmits(["previewEnded"]);
+
+// data
+let playing = ref<boolean>(true);
+
+// computed
+const isPreview = computed((): boolean => {
+  const previewEnabled = pagesConfigValue.value(
+    "archive_player.preview_enabled",
+    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 = () => {
+  playing.value = false;
+  if (ref.mediaPlayer) {
+    ref.mediaPlayer.stop();
+    // @todo ensure emit will suffice
+    // previewEnded = true;
+  }
+  emit("previewEnded");
+};
+
+const checkTime = (_time: Number) => {
+  // @todo set current time for chapter timings only
+  // setCurrentTime(_time);
+  if (isPreview && _time >= previewDuration.value) {
+    firePreviewEnded();
+  }
+};
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', 'media-container')">
+    <CommonArchiveVideoPlayer
+      ref="mediaPlayer"
+      :presentation="presentation"
+      :playing="playing"
+      :class-object="classObject.components.webcastPlayer"
+      @time="checkTime"
+    ></CommonArchiveVideoPlayer>
+  </div>
+</template>
+
+<style scoped>
+.media-container {
+  display: grid;
+  grid-template-columns: var(--media-template-columns-default);
+  column-gap: 4px;
+  grid-template-rows: auto;
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.media-item {
+  display: grid;
+}
+
+@screen lg {
+  img.normal {
+    max-height: 65vh;
+  }
+}
+
+.expand-overlay {
+  display: none;
+  font-size: 1em;
+  line-height: 1em;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  position: absolute;
+  transition: 0.6s ease;
+  text-align: right;
+}
+
+@media (min-width: 900px) {
+  .media-container {
+    grid-template-columns: var(--media-template-columns-large);
+  }
+  .expand-overlay {
+    @apply p-2;
+    display: block;
+  }
+  .expand-overlay:hover {
+    opacity: 0.7;
+  }
+}
+</style>