@icvdeveloper/common-module 0.0.75 → 0.0.78

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

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import { toRefs, computed, 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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { 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
+      :conference="conference"
+      :class-object="classObject.components.agendaList"
+      style="margin-top: 0; margin-bottom: 0; border: none"
+    />
+  </div>
+</template>
+
+<style 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;
+}
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+  <transition name="slide-fade">
+    <div v-if="visible" class="flex bg-yellow-lightest shadow text-grey-darker py-6 px-10">
+      <div class="flex-1 text-center mx-auto">
+        <p>
+          Time Remaining <span :class="timeRemainingClass">{{ displayFor }} seconds </span>
+        </p>
+        <p v-text="promptText"></p>
+        <p>
+          <button class="btn btn-secondary" @click="acceptClick" v-text="buttonText"></button>
+        </p>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Echo from 'laravel-echo';
+window.Pusher = require('pusher-js');
+
+/**
+ @todo Extract the wsHost and app ID out so that this can run in multiple environments (local, staging, production) 
+ */
+ 
+window.Echo = new Echo({
+  key: '07Ve4MlR6FmN0Il8Wy',
+  broadcaster: 'pusher',
+  cluster: 'us2',
+  wsHost: 'socket.v3plusportal.com',
+  wsPort: 6001,
+  wssPort: 6002,
+  disableStats: false,
+  encrypted: true,
+  enabledTransports: ['ws', 'wss'],
+});
+
+export default {
+  data() {
+    return {
+      pusher: null,
+      channel: null,
+      displayFor: 0,
+      promptText: '',
+      buttonText: '',
+      visible: false,
+      countdownLoopId: null,
+    };
+  },
+  computed: {
+    timeRemainingClass() {
+      if (this.displayFor > 10) {
+        return 'font-bold text-green-dark';
+      }
+      return 'font-bold text-red';
+    },
+  },
+  props: {
+    conferenceId: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    handleNotification(_conference) {
+      clearInterval(this.countdownLoopId);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      this.visible = true;
+      this.displayFor = parseInt(_conference.ce_credit_config.display_for) || 30;
+      this.promptText = _conference.ce_credit_config.prompt_text;
+      this.buttonText = _conference.ce_credit_config.button_text;
+      this.countdownLoopId = setInterval(this.countdownLoop, 1000);
+    },
+    countdownLoop() {
+      if (this.displayFor > 0) {
+        this.displayFor--;
+      } else {
+        this.closeNotification();
+      }
+    },
+    acceptClick() {
+      this.closeNotification();
+    },
+    closeNotification() {
+      this.displayFor = 0;
+      this.visible = false;
+      clearInterval(this.countdownLoopId);
+    },
+  },
+  created() {
+    window.Echo.channel(`ce-notification.${this.conferenceId}`).listen('CeCreditNotification', event => {
+      this.handleNotification(event.conference);
+    });
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/dist/runtime/components/media/components/CeCreditNotification.vue.d.ts

@@ -0,0 +1,28 @@
+declare namespace _default {
+    function data(): {
+        pusher: null;
+        channel: null;
+        displayFor: number;
+        promptText: string;
+        buttonText: string;
+        visible: boolean;
+        countdownLoopId: null;
+    };
+    namespace computed {
+        function timeRemainingClass(): "font-bold text-green-dark" | "font-bold text-red";
+    }
+    namespace props {
+        namespace conferenceId {
+            const type: NumberConstructor;
+            const required: boolean;
+        }
+    }
+    namespace methods {
+        function handleNotification(_conference: any): void;
+        function countdownLoop(): void;
+        function acceptClick(): void;
+        function closeNotification(): void;
+    }
+    function created(): void;
+}
+export default _default;

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <accordion :content-object="currentPresentation" v-for="item in tabArray" :tab-content="item">
+      <div class="content flex flex-1 accordion-slot overflow-x-hidden">
+        <overview-panel v-if="item.type == 'overview'"></overview-panel>
+        <presenters-panel v-if="item.type == 'presenters'" layout-format="PresenterItemCard" item-width="90"></presenters-panel>
+        <documents-panel v-if="item.type == 'documents'"></documents-panel>
+        <sponsors-panel v-if="item.type == 'sponsors'"></sponsors-panel>
+        <chat v-if="item.type == 'chatroom'"></chat>
+        <dynamic-html v-if="item.type == 'html'" :template="item.content"></dynamic-html>
+      </div>
+    </accordion>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+import Accordion from '@/components/common/Accordion';
+import OverviewPanel from "./OverviewPanel";
+import PresentersPanel from "./PresentersPanel";
+import DocumentsPanel from "./DocumentsPanel";
+import SponsorsPanel from "./SponsorsPanel";
+import Chat from "@/components/common/Chat";
+
+export default {
+  components: {
+    Accordion,
+    OverviewPanel,
+    PresentersPanel,
+    DocumentsPanel,
+    SponsorsPanel,
+    Chat
+  },
+  data() {
+    return {};
+  },
+  props: {
+    currentPresentation: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    tabArray: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  computed: {
+    ...mapState("playerConfig", ["selectedContent"])
+  },
+  methods: {
+  }
+};
+</script>
+
+<style>
+  .accordion-slot {
+    max-height: 32rem;
+    overflow-y: scroll;
+  }
+</style>

package/dist/runtime/components/media/components/ContentAccordion.vue.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    namespace components {
+        export { Accordion };
+        export { OverviewPanel };
+        export { PresentersPanel };
+        export { DocumentsPanel };
+        export { SponsorsPanel };
+        export { Chat };
+    }
+    function data(): {};
+    namespace props {
+        namespace currentPresentation {
+            export const type: ObjectConstructor;
+            function _default(): {};
+            export { _default as default };
+        }
+        namespace tabArray {
+            const type_1: ArrayConstructor;
+            export { type_1 as type };
+            function _default_1(): never[];
+            export { _default_1 as default };
+        }
+    }
+    namespace computed {
+        const selectedContent: import("vuex").Computed;
+    }
+    const methods: {};
+}
+export default _default;

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

@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { storeToRefs } from "pinia";
+import { get, filter } from "lodash-es";
+import { SelectedContent } from "../../../enums/general";
+import {
+  ContentAreaClassObj,
+  ContentAreaCompObj,
+  OverviewPanelClassObj,
+  AgendaPanelClassObj,
+} from "../../../@types/components";
+import { Conference, Presentation, Sponsor } from "../../../models/conference";
+import { useClassBinding } from "../../../composables/useClassBinding";
+import { useTemplateConfigsStore } from "../../../store";
+
+type Props = {
+  selectedContent?: { label: string; type: SelectedContent; content: string };
+  expandEnabled?: boolean;
+  presentation: Presentation;
+  webcastConference: Conference;
+  classObject?: ContentAreaClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedContent: () => {
+    return { label: "Overview", type: SelectedContent.OVERVIEW, content: "" };
+  },
+  expandEnabled: false,
+  classObject: () => {
+    return {
+      container: "",
+      htmlElement: "",
+      trackHtmlElement: "",
+      noTrackHtmlElement: "",
+      noTrackHtmlText: "",
+      components: ref<ContentAreaCompObj>({
+        overviewPanel: ref<OverviewPanelClassObj>({}),
+        agendaPanel: ref<AgendaPanelClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { expandEnabled, presentation, webcastConference } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
+const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
+
+// reactive data
+let sponsors = ref<Array<Sponsor>>([]);
+
+// computed
+const trackEmbedHtml = computed((): string | null => {
+  get(presentation, "tracks[0].embed_html", null);
+});
+
+// methods
+const getFeaturedSponsors = () => {
+  const featuredSponsorLevel = get(
+    pagesConfigValue,
+    "webcast.featured_sponsor_level.value",
+    0
+  );
+  if (featuredSponsorLevel != 0) {
+    const url = `conferences/${webcastConference.value.id}/affiliates?filters[level]=${featuredSponsorLevel}`;
+    fetch(url)
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        sponsors = filter(data, { role: "sponsor" });
+      });
+  }
+};
+
+// mounted
+onMounted(() => {
+  getFeaturedSponsors();
+});
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', 'flex flex-col')">
+    <CommonComponentsOverviewPanel
+      v-if="selectedContent.type == 'overview'"
+      :class="
+        classBinding(
+          classObject.components.overviewPanel,
+          'container',
+          'overflow-y-scroll no-scrollbar h-full'
+        )
+      "
+      :presentation="presentation"
+      :class-object="classObject.components.overviewPanel"
+    ></CommonComponentsOverviewPanel>
+    <CommonComponentsAgendaPanel
+      v-if="selectedContent.type == 'agenda'"
+      :class="
+        classBinding(
+          classObject.components.agendaPanel,
+          'container',
+          'overflow-y-scroll no-scrollbar h-full'
+        )
+      "
+      :conference="webcastConference"
+      :class-object="classObject.components.agendaPanel"
+    ></CommonComponentsAgendaPanel>
+    <span
+      v-if="selectedContent.type == 'html'"
+      :class="
+        classBinding(
+          classObject,
+          'htmlElement',
+          'overflow-y-scroll no-scrollbar h-full'
+        )
+      "
+      v-html="selectedContent.content"
+    ></span>
+    <template v-if="selectedContent.type == 'track_html'">
+      <span
+        v-if="trackEmbedHtml != null"
+        :class="
+          classBinding(
+            classObject,
+            'trackHtmlElement',
+            'overflow-y-scroll no-scrollbar h-full'
+          )
+        "
+        v-html="trackEmbedHtml"
+      ></span>
+      <div
+        v-if="trackEmbedHtml === null"
+        :class="
+          classBinding(
+            classObject,
+            'noTrackHtmlElement',
+            'text-grey-800 px-2 py-4'
+          )
+        "
+      >
+        <p
+          :class="
+            classBinding(
+              classObject,
+              'noTrackHtmlText',
+              'text-base leading-normal font-light'
+            )
+          "
+        >
+          There is no additional content for this track.
+        </p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  position: relative;
+}
+
+.content-expand-overlay {
+  justify-content: flex-end;
+  align-items: flex-start;
+  font-size: 1em;
+  line-height: 1em;
+  z-index: 40;
+  position: absolute;
+  transition: 0.4s ease;
+}
+.content-expand-overlay:hover {
+  opacity: 0.7;
+}
+</style>