@icvdeveloper/common-module 0.0.75 → 0.0.78

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

@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { storeToRefs } from "pinia";
+import { find } from "lodash-es";
+import { Conference } from "../../../models/conference";
+import { ContentTabsClassObject } from "../../../@types/components";
+import { SelectedContent } from "../../../enums/general";
+import { useClassBinding } from "../../../composables/useClassBinding";
+
+type Props = {
+  items?: Array<{ label: string; type: SelectedContent; content: string }>;
+  webcastConference: Conference;
+  classObject?: ContentTabsClassObject;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  items: Array<{
+    label: "";
+    type: SelectedContent.OVERVIEW;
+    content: "";
+  }>,
+  classObject: () => {
+    return {
+      container: "",
+      fullContainer: "",
+      mobileContainer: "",
+      mobileButtonContainer: "",
+      dropdownContainer: "",
+      tabList: "",
+      tabItem: "",
+      tabLink: "",
+      selectedTab: "",
+      mobileTabList: "",
+      mobileTabItem: "",
+      mobileTabLink: "",
+    };
+  },
+});
+
+const { items, webcastConference } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
+// reactive data
+const { selectedContent } = storeToRefs(usePresentationsStore());
+const tabOpen = ref<boolean>(false);
+
+// computed
+const hasAgendaTab = computed((): boolean => {
+  return find(items, { type: SelectedContent.AGENDA }, false);
+});
+
+const selectedTabClass = computed((): string => {
+  return props.classObject.selectedTab;
+});
+
+// methods
+const tabToggle = () => {
+  tabOpen.value = !tabOpen.value;
+};
+
+const showItem = (_index: number) => {
+  let clickedItem = items.value[_index];
+
+  if (clickedItem.type === SelectedContent.URL) {
+    window.open(clickedItem.content);
+  } else {
+    selectedContent.value = clickedItem;
+  }
+};
+
+onMounted(() => {
+  if (items.value) {
+    selectedContent.value = items.value[0];
+  }
+});
+
+// ...mapState("playerConfig"),
+// ...mapState(["agendaAlias"])
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', '')">
+    <div
+      :class="[
+        items.length >= 4 ? 'md:block' : 'sm:block',
+        classBinding(classObject, 'fullContainer', 'hidden tabs border-0'),
+      ]"
+    >
+      <ul
+        :class="
+          classBinding(
+            classObject,
+            'tabList',
+            'list-reset flex flex-row flex-wrap justify-start'
+          )
+        "
+      >
+        <li
+          v-for="(item, index) in items"
+          :key="index"
+          :class="[
+            { '-mb-px': selectedContent.label == item.label },
+            classBinding(classObject, 'tabItem', 'tab-items'),
+          ]"
+        >
+          <a
+            :class="[
+              selectedContent.label == item.label ? selectedTabClass : '',
+              ,
+              classBinding(
+                classObject,
+                'tabLink',
+                'primary-link inline-block py-2 px-2 cursor-pointer'
+              ),
+            ]"
+            @click.prevent="showItem(index)"
+            >{{ item.label }}</a
+          >
+        </li>
+        <li
+          v-if="webcastConference.agenda_enabled && !hasAgendaTab"
+          :class="classBinding(classObject, 'tabList', 'tab-items sm:ml-auto')"
+        >
+          <nuxt-link
+            :to="`/agenda/${webcastConference.id}`"
+            :class="
+              classBinding(
+                classObject,
+                'tabItem',
+                'primary-link inline-block py-2 px-1 cursor-pointer'
+              )
+            "
+            >{{ agendaAlias }}</nuxt-link
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div
+      :class="[
+        items.length >= 4 ? 'md:hidden' : 'sm:hidden',
+        classBinding(classObject, 'mobileContainer', 'tabs border-0'),
+      ]"
+    >
+      <div
+        :class="classBinding(classObject, 'mobileButtonContainer', 'p-1 block')"
+      >
+        <button class="flex items-center px-3 py-2 mx-auto" @click="tabToggle">
+          <svg
+            class="fill-current h-3 w-3"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Menu</title>
+            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+          </svg>
+        </button>
+      </div>
+      <div
+        :class="[
+          tabOpen ? 'flex' : 'hidden',
+          classBinding(classObject, 'dropdownContainer', 'w-full'),
+        ]"
+      >
+        <ul
+          :class="
+            classBinding(
+              classObject,
+              'mobileTabList',
+              'flex-col self-center list-reset mx-auto'
+            )
+          "
+        >
+          <li
+            v-for="(item, index) in items"
+            :key="index"
+            :class="[
+              { '-mb-px': selectedContent.label == item.label },
+              classBinding(
+                classObject,
+                'mobileTabItem',
+                'tab-items text-center'
+              ),
+            ]"
+          >
+            <a
+              :class="[
+                selectedContent.label == item.label ? selectedTabClass : '',
+                classBinding(
+                  classObject,
+                  'mobileTabLink',
+                  'primary-link inline-block py-2 px-2 cursor-pointer'
+                ),
+              ]"
+              @click.prevent="showItem(index)"
+              >{{ item.label }}</a
+            >
+          </li>
+          <li
+            v-if="webcastConference.agenda_enabled && !hasAgendaTab"
+            :class="
+              classBinding(
+                classObject,
+                'mobileTabItem',
+                'tab-items text-center'
+              )
+            "
+          >
+            <nuxt-link
+              :to="`/agenda/${webcastConference.id}`"
+              :class="
+                classBinding(
+                  classObject,
+                  'mobileTabLink',
+                  'primary-link inline-block py-2 px-2 cursor-pointer'
+                )
+              "
+              >{{ agendaAlias }}</nuxt-link
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tab-items {
+  @apply mr-1 flex-1;
+}
+@screen sm {
+  .tab-items {
+    @apply flex-initial;
+  }
+}
+
+.active {
+  background: linear-gradient(0deg, rgb(80, 80, 80) 0%, rgb(180, 180, 180) 100%);
+  color: white;
+  font-weight: bold;
+}
+
+.tab-bar {
+  @apply flex flex-wrap;
+  background: rgb(226, 226, 226);
+  background: linear-gradient(0deg, rgb(226, 226, 226) 0%, rgb(244, 244, 244) 100%);
+}
+.tab-bar .close {
+  @apply block flex flex-1 justify-end;
+}
+.tab-bar .close:hover {
+  filter: opacity(0.7);
+}
+
+.tab-bar .item {
+  display: block;
+  float: left;
+}
+.tab-bar .item:hover {
+  background: linear-gradient(0deg, rgb(180, 180, 180) 0%, rgb(220, 220, 220) 100%);
+}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+  <div v-if="documentArray && documentArray.length > 0" class="py-4 px-4 text-base md:text-md lg:text-lg leading-normal">
+    <ul class="list-reset">
+      <li v-for="(document, index) in documentArray" :key="index" class="py-2" :class="{'border-b-2 contrast-border' : index !== documentArray.length-1}">
+          <!-- fix file image -->
+          <!--<img src="/images/pdf.svg" class="inline-block icon" />-->
+          <a :href="document.url" class="no-underline font-semibold text-sm md:text-base" target="_blank">
+            <p class="leading-tight mb-0">
+              {{document.name}}
+            </p>
+          </a>
+          <p v-if="document.description" class="mt-2 mb-6">{{document.description}}</p>
+      </li>
+    </ul>
+  </div>
+  <div v-else class="text-grey-800 px-2 py-4">
+      <p class="text-base leading-normal font-light">There are no documents associated with this presentation.</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    documentArray() {
+      return this.$parent.currentPresentation.documents;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.document-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+.document-grid .grid-item {
+  display: inline-block;
+  align-items: center;
+  align-self: center;
+}
+.document-grid .grid-item a:hover {
+  text-decoration: underline;
+}
+
+.icon {
+  width: 30px;
+}
+</style>

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

@@ -0,0 +1,7 @@
+declare namespace _default {
+    function data(): {};
+    namespace computed {
+        function documentArray(): any;
+    }
+}
+export default _default;

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

@@ -0,0 +1,33 @@
+<template functional></template>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    ajaxLoadingOptions: () => {
+      return {
+        progress: false,
+        transformRequest: (data, headers) => {
+          delete headers.common['Authorization'];
+          return data;
+        }
+      };
+    }
+  },
+  methods: {
+    getData() {
+      this.$axios
+        .get(url, this.ajaxLoadingOptions)
+        .then(response => {
+          this.$emit("data", response);
+        })
+        .catch(e => {
+          console.log("JSON does not exists.", e);
+        });
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,16 @@
+declare namespace _default {
+    namespace props {
+        namespace url {
+            const type: StringConstructor;
+            const required: boolean;
+        }
+        function ajaxLoadingOptions(): {
+            progress: boolean;
+            transformRequest: (data: any, headers: any) => any;
+        };
+    }
+    namespace methods {
+        function getData(): void;
+    }
+}
+export default _default;

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;