@icvdeveloper/common-module 0.0.76 → 0.0.78

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>

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;