@icvdeveloper/common-module 0.0.76 → 0.0.78

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

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { Conference, Presentation } from "../../../models/conference";
+import {
+  MediaContainerClassObj,
+  MediaContainerCompObj,
+  WebcastPlayerClassObj,
+} from "../../../@types/components";
+import { useV3plusCommonModule } from "../../../composables/useV3plusCommonModule";
+import { useStream } from "../../../composables/useStream";
+import { useClassBinding } from "../../../composables/useClassBinding";
+
+const commonModule = useV3plusCommonModule();
+
+type Props = {
+  webcastConference: Conference;
+  classObject?: MediaContainerClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      components: ref<MediaContainerCompObj>({
+        webcastPlayer: ref<WebcastPlayerClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { webcastConference } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
+// emits
+const emit = defineEmits<{
+  (event: string, value: Presentation): void;
+}>();
+
+const { currentStreamData, currentPresentation } = useStream(
+  "us-west-2",
+  "staging",
+  Number(webcastConference.value.id),
+  emit
+);
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', 'media-container')">
+    <CommonWebcastVideoPlayer
+      ref="mediaPlayer"
+      :stream="currentStreamData"
+      :presentation="currentPresentation"
+      :class-object="classObject.components.webcastPlayer"
+    ></CommonWebcastVideoPlayer>
+  </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>

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

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { Presentation } from "../../../models/conference";
+import { OverviewPanelClassObj } from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
+type Props = {
+  presentation: Presentation;
+  classObject?: OverviewPanelClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      htmlElement: "",
+      noOverviewElement: "",
+    };
+  },
+});
+
+const { presentation } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
+// computed
+const sessionOverview = computed((): string | null => {
+  return presentation.value.description ? presentation.value.description : null;
+});
+</script>
+
+<template>
+  <div
+    :class="
+      classBinding(
+        classObject,
+        'container',
+        'text-grey-800 px-2 py-4 text-base leading-normal font-light'
+      )
+    "
+  >
+    <span
+      v-if="sessionOverview"
+      :class="classBinding(classObject, 'htmlElement', '')"
+      v-html="sessionOverview"
+    ></span>
+    <p v-else :class="classBinding(classObject, 'noOverviewElement', '')">
+      There is no overview for this presentation.
+    </p>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,65 @@
+<template>
+  <span v-if="presenterLevelArray['presenters_all'].presenters.length > 0">
+    <presenters-detail
+        :presenters-by-level="presenterLevelArray"
+        :pres-format="layoutFormat"
+        :item-width="itemWidth"
+        :show-levels="false"
+        :is-compact="isCompact"
+    ></presenters-detail>
+  </span>
+  <div v-else class="text-grey-800 px-2 py-4">
+      <p class="text-base leading-normal font-light">There are no presenters associated with this presentation.</p>
+  </div>
+</template>
+
+<script>
+import PresentersDetail from '@/components/presenters/PresentersDetail';
+
+export default {
+  props: {
+    itemWidth: {
+      type: String,
+      default: '120'
+    },
+    layoutFormat: {
+      type: String,
+      default: 'PresenterItemGrid'
+    },
+    isCompact: {
+      default: true,
+      type: Boolean
+    }
+  },
+  components: {
+    PresentersDetail
+  },
+  provide() {
+    return {
+      itemWidth: this.itemWidth,
+      imageStyle: this.imageStyle,
+    };
+  },
+  computed: {
+    presenterLevelArray() {
+      let returnArray = [];
+      returnArray['presenters_all'] = { 'presenters': _.sortBy(this.$parent.currentPresentation.presenters, function (presenter) {
+        return presenter.pivot.order;
+      }) };
+      return returnArray;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.presenter-grid {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 10px;
+}
+.presenter-grid .grid-item {
+  align-items: center;
+  align-self: center;
+}
+</style>

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

@@ -0,0 +1,32 @@
+declare namespace _default {
+    namespace props {
+        namespace itemWidth {
+            export const type: StringConstructor;
+            const _default: string;
+            export { _default as default };
+        }
+        namespace layoutFormat {
+            const type_1: StringConstructor;
+            export { type_1 as type };
+            const _default_1: string;
+            export { _default_1 as default };
+        }
+        namespace isCompact {
+            const _default_2: boolean;
+            export { _default_2 as default };
+            const type_2: BooleanConstructor;
+            export { type_2 as type };
+        }
+    }
+    namespace components {
+        export { PresentersDetail };
+    }
+    function provide(): {
+        itemWidth: any;
+        imageStyle: any;
+    };
+    namespace computed {
+        function presenterLevelArray(): any[];
+    }
+}
+export default _default;

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

@@ -0,0 +1,96 @@
+<script>
+import Cookies from "universal-cookie";
+
+const cookies = new Cookies();
+
+export default {
+  render() {},
+  data() {
+    return {
+      sessionCookieName: "session-cookie",
+      sessionId: null,
+      sessionLoopId: null,
+      sessionLoopIntervalMinutes: 5,
+      cookieExpireMinutes: 20
+    };
+  },
+  props: {
+    loggableType: {
+      type: String,
+      default: "App\\Presentation"
+    },
+    loggableId: {
+      type: Number
+    }
+  },
+  watch: {
+    loggableId(_newId, _oldId) {
+      this.updateSession();
+    }
+  },
+  methods: {
+    getSessionIdFromCookie() {
+      return (this.sessionId = cookies.get(this.sessionCookieName));
+    },
+    initSessionLoop() {
+      this.sessionLoop();
+      this.sessionLoopId = setInterval(
+        this.sessionLoop,
+        parseInt(this.sessionLoopIntervalMinutes * 60 * 1000)
+      );
+    },
+    sessionLoop() {
+      if (this.getSessionIdFromCookie()) {
+        this.updateSession();
+      } else {
+        this.initSession();
+      }
+    },
+    updateSessionCookie() {
+      let expireDate = new Date(
+        new Date().getTime() + this.cookieExpireMinutes * 60 * 1000
+      );
+
+      cookies.set(this.sessionCookieName, this.sessionId, {
+        expires: expireDate
+      });
+    },
+    initSession() {
+      this.$axios.$post("session-logs", {}).then(response => {
+        this.sessionId = response;
+        this.updateSession();
+      });
+    },
+    updateSession() {
+      if (!this.sessionId || !this.loggableType || !this.loggableId) {
+        return false;
+      }
+
+      this.updateSessionCookie();
+
+      let inputs = {
+        _method: "PATCH",
+        resource_type: this.loggableType,
+        resource_id: this.loggableId
+      };
+
+      this.$axios
+        .$post(`session-logs/${this.sessionId}`, inputs)
+        .then(response => {
+          console.log("updateSession", response);
+        })
+        .catch(error => {
+          console.log("Error updating session-log", error);
+        });
+    }
+  },
+  mounted() {
+    console.log("SessionReporting component mounted");
+    this.initSessionLoop();
+  },
+  beforeRouteLeave(to, from, next) {
+    clearInterval(this.sessionLoopId);
+    next();
+  }
+};
+</script>

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

@@ -0,0 +1,35 @@
+declare namespace _default {
+    function render(): void;
+    function data(): {
+        sessionCookieName: string;
+        sessionId: null;
+        sessionLoopId: null;
+        sessionLoopIntervalMinutes: number;
+        cookieExpireMinutes: number;
+    };
+    namespace props {
+        namespace loggableType {
+            export const type: StringConstructor;
+            const _default: string;
+            export { _default as default };
+        }
+        namespace loggableId {
+            const type_1: NumberConstructor;
+            export { type_1 as type };
+        }
+    }
+    namespace watch {
+        function loggableId(_newId: any, _oldId: any): void;
+    }
+    namespace methods {
+        function getSessionIdFromCookie(): any;
+        function initSessionLoop(): void;
+        function sessionLoop(): void;
+        function updateSessionCookie(): void;
+        function initSession(): void;
+        function updateSession(): false | undefined;
+    }
+    function mounted(): void;
+    function beforeRouteLeave(to: any, from: any, next: any): void;
+}
+export default _default;

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

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <div v-if="sponsorsArray.length > 0" class="text-grey-800 px-4 py-4" :class="trackSponsorsArray.length > 0 ? 'border-b border-light-grey' : ''">
+            <div class="mb-4">
+                <!-- Session Sponsors -->
+                <h3 class="primary-link text-lg text-center mb-3">Session Sponsors</h3>
+                <div class="flex flex-row md:flex-col flex-wrap">
+                    <div v-for="(sponsor, index) in sponsorsArray" :key="index" class="flex-1 mx-4 my-2 md:mx-0 self-center">
+                        <a :href="sponsor.website" target="_blank" class="block mx-auto">
+                            <img :src="sponsor.photo" class="block mx-auto" />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-if="trackSponsorsArray.length > 0" class="text-grey-800 px-4 py-4">
+            <div class="mb-4">
+                <!-- Session Sponsors -->
+                <h3 class="primary-link text-lg text-center mb-3">Track Sponsors</h3>
+                <div class="flex flex-row md:flex-col flex-wrap">
+                    <div v-for="(sponsor, index) in trackSponsorsArray" :key="index" class="flex-1 mx-4 my-2 md:mx-0 self-center">
+                        <a :href="sponsor.website" target="_blank" class="block mx-auto">
+                            <img :src="sponsor.photo" class="block mx-auto" />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>        
+        <div v-if="!sponsorsArray.length && !trackSponsorsArray.length" class="text-grey-800 px-2 py-4">
+            <p class="text-base leading-normal font-light">There are no sponsors associated with this presentation.</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sponsorsArray: [],
+            trackSponsorsArray: []
+        };
+    },
+    props: {
+        sponsorType: {
+            type: String
+        },
+        currentPresentation: {
+          type: Object,
+          default: () => {
+            return {};
+          }
+        },
+    },
+    computed: {
+    },
+    methods: {
+    },
+    watch: {
+        currentPresentation: {
+            immediate: true,
+            handler (currentPres) {
+                if(currentPres.sponsors) {
+                    this.sponsorsArray = currentPres.sponsors;
+                }
+                if(currentPres.tracks) {
+                    this.trackSponsorsArray = currentPres.tracks[0].sponsors;
+                }
+            }
+        }
+    }
+}
+</script>
+
+<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/SponsorsPanel.vue.d.ts

@@ -0,0 +1,27 @@
+declare namespace _default {
+    function data(): {
+        sponsorsArray: never[];
+        trackSponsorsArray: never[];
+    };
+    namespace props {
+        namespace sponsorType {
+            const type: StringConstructor;
+        }
+        namespace currentPresentation {
+            const type_1: ObjectConstructor;
+            export { type_1 as type };
+            function _default(): {};
+            export { _default as default };
+        }
+    }
+    const computed: {};
+    const methods: {};
+    namespace watch {
+        export namespace currentPresentation_1 {
+            const immediate: boolean;
+            function handler(currentPres: any): void;
+        }
+        export { currentPresentation_1 as currentPresentation };
+    }
+}
+export default _default;

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

@@ -0,0 +1,118 @@
+<template>
+  <vue-draggable-resizable
+    :w="startSize.width"
+    :h="startSize.height"
+    :x="startPosition.x"
+    :y="startPosition.y"
+    :min-width="200"
+    :min-height="200"
+    :z="zIndex"
+    :active="true"
+    class-name="pop-window"
+    class-name-active="pop-window-active"
+    @activated="onActivated"
+    @deactivated="onDeActivated"
+    class="bg-white shadow-lg cursor-move"
+  >
+    <div :style="overlayStyle" class="expand-overlay">
+      <a @click.prevent="closeClick">
+        <i class="fas fa-compress-arrows-alt"></i>
+      </a>
+    </div>
+
+    <div class="outer-container max-h-full p-1">
+      <content-area class="h-auto max-h-full" :current-presentation="currentPresentation"></content-area>
+    </div>
+  </vue-draggable-resizable>
+</template>
+
+<script>
+import Vue from "vue";
+import VueDraggableResizable from "vue-draggable-resizable";
+import "vue-draggable-resizable/dist/VueDraggableResizable.css";
+
+import ContentTabs from "./ContentTabs";
+import ContentArea from "./ContentArea";
+
+Vue.component("vue-draggable-resizable", VueDraggableResizable);
+
+export default {
+  components: {
+    ContentTabs,
+    ContentArea
+  },
+  data() {
+    return {
+      zIndex: 300,
+      active: true
+    };
+  },
+  props: {
+    tabArray: {
+      type: Array,
+      default: []
+    },
+    startSize: {
+      type: Object,
+      default: () => {
+        return { width: 640, height: 480 };
+      }
+    },
+    startPosition: {
+      type: Object,
+      default: () => {
+        return { x: 0, y: 0 };
+      }
+    },
+    currentPresentation: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  computed: {
+    overlayStyle() {
+      return this.active ? "opacity: .7;" : "opacity: 0";
+    }
+  },
+  methods: {
+    closeClick(e) {
+      this.$emit("closeClick", this);
+    },
+    onActivated(e) {
+      this.zIndex = 500;
+      this.active = true;
+    },
+    onDeActivated(e) {
+      this.zIndex = 100;
+      this.active = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.outer-container {
+  position: relative;
+  overflow: auto;
+}
+
+.expand-overlay {
+  display: block;
+  font-size: 1em;
+  line-height: 1em;
+  opacity: 0;
+  width: 50px;
+  height: 50px;
+  top: -30px;
+  right: 0;
+  z-index: 100;
+  position: absolute;
+  transition: 0.6s ease;
+  text-align: right;
+}
+.expand-overlay:hover {
+  opacity: 0.7 !important;
+}
+</style>

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

@@ -0,0 +1,50 @@
+declare namespace _default {
+    namespace components {
+        export { ContentTabs };
+        export { ContentArea };
+    }
+    function data(): {
+        zIndex: number;
+        active: boolean;
+    };
+    namespace props {
+        namespace tabArray {
+            export const type: ArrayConstructor;
+            const _default: never[];
+            export { _default as default };
+        }
+        namespace startSize {
+            const type_1: ObjectConstructor;
+            export { type_1 as type };
+            function _default_1(): {
+                width: number;
+                height: number;
+            };
+            export { _default_1 as default };
+        }
+        namespace startPosition {
+            const type_2: ObjectConstructor;
+            export { type_2 as type };
+            function _default_2(): {
+                x: number;
+                y: number;
+            };
+            export { _default_2 as default };
+        }
+        namespace currentPresentation {
+            const type_3: ObjectConstructor;
+            export { type_3 as type };
+            function _default_3(): {};
+            export { _default_3 as default };
+        }
+    }
+    namespace computed {
+        function overlayStyle(): "opacity: .7;" | "opacity: 0";
+    }
+    namespace methods {
+        function closeClick(e: any): void;
+        function onActivated(e: any): void;
+        function onDeActivated(e: any): void;
+    }
+}
+export default _default;