@icvdeveloper/common-module 0.0.112 → 0.0.114

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

@@ -1,175 +1,178 @@
-<script lang="ts" setup>
-import { ref, toRefs, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
-import { useClassBinding } from "../../composables/useClassBinding";
-import { Conference, Presentation } from "../../models/conference";
-import { SelectedContent } from "../../enums/general";
-import { usePresentationsStore } from "../../store/presentations";
-import { useAuthStore } from "../../store/auth";
-import {
-  PlayerAndContentClassObj,
-  PlayerAndContentCompObj,
-  ContentTabsClassObj,
-  ContentAreaClassObj,
-  MediaContainerClassObj,
-} from "../../@types/components";
-
-type Props = {
-  conference: Conference;
-  presentation: Presentation;
-  tabs?: Array<{ label: string; type: SelectedContent; content: string }>;
-  classObject?: PlayerAndContentClassObj;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  tabs: () => {
-    return [
-      { label: "Overview", type: SelectedContent.OVERVIEW, content: "string" },
-    ];
-  },
-  classObject: () => {
-    return {
-      container: "",
-      noTabsContainer: "",
-      noTabsChild: "",
-      withTabsContainer: "",
-      withTabsChild: "",
-      mediaTabsContainer: "",
-      components: ref<PlayerAndContentCompObj>({
-        contentTabs: ref<ContentTabsClassObj>({}),
-        contentArea: ref<ContentAreaClassObj>({}),
-        mediaContainer: ref<MediaContainerClassObj>({}),
-      }),
-    };
-  },
-});
-
-const { conference, presentation } = toRefs(props);
-
-const route = ref(useRoute());
-
-const { classBinding } = useClassBinding();
-
-const { selectedContent } = storeToRefs(usePresentationsStore());
-const { isLoggedIn } = storeToRefs(useAuthStore());
-
-// computed
-
-const isStreamTest = computed((): boolean => {
-  return (
-    route.value.params.channelid === "stream-test" ||
-    String(route.value.name) === "stream-test"
-  );
-});
-
-const hasAccess = computed((): boolean => {
-  return isLoggedIn.value && conference.value.access;
-});
-</script>
-
-<template>
-  <div :class="classBinding(classObject, 'container', 'flex flex-col w-full')">
-    <!-- NO TABS -->
-    <div
-      v-if="isStreamTest || (hasAccess && !tabs.length)"
-      :class="
-        classBinding(
-          classObject,
-          'noTabsContainer',
-          'container mx-auto flex flex-col text-center pt-6'
-        )
-      "
-    >
-      <div :class="classBinding(classObject, 'noTabsChild', 'flex-1')">
-        <CommonComponentsMediaContainer
-          :class="
-            classBinding(
-              classObject,
-              'classObject.components.mediaContainer.container',
-              'flex-1 aspect-video'
-            )
-          "
-          :webcast-conference="conference"
-          :class-object="classObject.components.mediaContainer"
-        />
-      </div>
-    </div>
-
-    <!-- TABS -->
-    <div v-else :class="classBinding(classObject, 'withTabsContainer', '')">
-      <CommonComponentsContentTabs
-        :class="
-          classBinding(
-            classObject,
-            'classObject.components.contentTabs.container',
-            'hidden md:block'
-          )
-        "
-        :webcast-conference="conference"
-        :items="tabs"
-        :class-object="classObject.components.contentTabs"
-      />
-      <div
-        :class="
-          classBinding(
-            classObject,
-            'withTabsChild',
-            'flex-1 grid grid-cols-7 grid-rows-2 gap-y-4'
-          )
-        "
-      >
-        <div
-          :class="
-            classBinding(
-              classObject,
-              'MediaTabsContainer',
-              'col-span-7 row-span-1 md:col-span-4 lg:col-span-5 aspect-video'
-            )
-          "
-        >
-          <CommonComponentsMediaContainer
-            class="w-full"
-            :webcast-conference="conference"
-            :class-object="classObject.components.mediaContainer"
-          />
-          <CommonComponentsContentTabs
-            class="block md:hidden"
-            :webcast-conference="conference"
-            :items="tabs"
-            :class-object="classObject.components.contentTabs"
-          />
-        </div>
-        <CommonComponentsContentArea
-          class="col-span-7 row-span-1 md:col-span-3 lg:col-span-2 border ml-0 md:ml-6"
-          :selected-content="selectedContent"
-          :webcast-conference="conference"
-          :presentation="presentation"
-          :class-object="classObject.components.contentArea"
-        />
-        <!-- sponsor -->
-        <figure
-          class="col-span-7 md:col-start-5 md:col-span-3 lg:col-start-6 lg:col-span-6 row-span-1 flex flex-col p-6 text-center"
-        >
-          <h3
-            v-if="conference.affiliates.length > 0"
-            class="allsmallcaps text-sm pb-4 text-neutral-400 scala"
-          >
-            Sponsored by:
-          </h3>
-          <template v-for="affiliate in conference.affiliates">
-            <CommonComponentsSponsor
-              v-if="affiliate.role == 'sponsor'"
-              :key="affiliate.id"
-              :sponsor="affiliate"
-              :class-object="{
-                labelImageContainer: 'block',
-                sponsorContainer: 'img-mx-auto',
-              }"
-            />
-          </template>
-        </figure>
-      </div>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
+import { useEvents } from "../../composables/useEvents";
+import { useClassBinding } from "../../composables/useClassBinding";
+import { Conference, Presentation } from "../../models/conference";
+import { SelectedContent } from "../../enums/general";
+import { usePresentationsStore } from "../../store/presentations";
+import { useAuthStore } from "../../store/auth";
+import {
+  PlayerAndContentClassObj,
+  PlayerAndContentCompObj,
+  ContentTabsClassObj,
+  ContentAreaClassObj,
+  MediaContainerClassObj,
+} from "../../@types/components";
+
+type Props = {
+  conference: Conference;
+  presentation: Presentation;
+  tabs?: Array<{ label: string; type: SelectedContent; content: string }>;
+  classObject?: PlayerAndContentClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  tabs: () => {
+    return [
+      { label: "Overview", type: SelectedContent.OVERVIEW, content: "string" },
+    ];
+  },
+  classObject: () => {
+    return {
+      container: "",
+      noTabsContainer: "",
+      noTabsChild: "",
+      withTabsContainer: "",
+      withTabsChild: "",
+      mediaTabsContainer: "",
+      components: ref<PlayerAndContentCompObj>({
+        contentTabs: ref<ContentTabsClassObj>({}),
+        contentArea: ref<ContentAreaClassObj>({}),
+        mediaContainer: ref<MediaContainerClassObj>({}),
+      }),
+    };
+  },
+});
+
+const { conference, presentation } = toRefs(props);
+
+const route = ref(useRoute());
+
+const { classBinding } = useClassBinding();
+const { getSponsors } = useEvents();
+
+const { selectedContent } = storeToRefs(usePresentationsStore());
+const { isLoggedIn } = storeToRefs(useAuthStore());
+
+// computed
+
+const isStreamTest = computed((): boolean => {
+  return (
+    route.value.params.channelid === "stream-test" ||
+    String(route.value.name) === "stream-test"
+  );
+});
+
+const hasAccess = computed((): boolean => {
+  return isLoggedIn.value && conference.value.access;
+});
+</script>
+
+<template>
+  <div :class="classBinding(classObject, 'container', 'flex flex-col w-full')">
+    <!-- NO TABS -->
+    <div
+      v-if="isStreamTest || (hasAccess && !tabs.length)"
+      :class="
+        classBinding(
+          classObject,
+          'noTabsContainer',
+          'container mx-auto flex flex-col text-center pt-6'
+        )
+      "
+    >
+      <div :class="classBinding(classObject, 'noTabsChild', 'flex-1')">
+        <CommonComponentsMediaContainer
+          :class="
+            classBinding(
+              classObject,
+              'classObject.components.mediaContainer.container',
+              'flex-1 aspect-video'
+            )
+          "
+          :webcast-conference="conference"
+          :class-object="classObject.components.mediaContainer"
+        />
+      </div>
+    </div>
+
+    <!-- TABS -->
+    <div v-else :class="classBinding(classObject, 'withTabsContainer', '')">
+      <CommonComponentsContentTabs
+        :class="
+          classBinding(
+            classObject,
+            'classObject.components.contentTabs.container',
+            'hidden md:block'
+          )
+        "
+        :webcast-conference="conference"
+        :items="tabs"
+        :class-object="classObject.components.contentTabs"
+      />
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'withTabsChild',
+            'flex-1 grid grid-cols-7 grid-rows-2 gap-y-4'
+          )
+        "
+      >
+        <div
+          :class="
+            classBinding(
+              classObject,
+              'mediaTabsContainer',
+              'col-span-7 row-span-1 md:col-span-4 lg:col-span-5 aspect-video'
+            )
+          "
+        >
+          <CommonComponentsMediaContainer
+            class="w-full"
+            :webcast-conference="conference"
+            :class-object="classObject.components.mediaContainer"
+          />
+          <CommonComponentsContentTabs
+            class="block md:hidden"
+            :webcast-conference="conference"
+            :items="tabs"
+            :class-object="classObject.components.contentTabs"
+          />
+        </div>
+        <CommonComponentsContentArea
+          class="col-span-7 row-span-1 md:col-span-3 lg:col-span-2 border ml-0 md:ml-6"
+          :selected-content="selectedContent"
+          :webcast-conference="conference"
+          :presentation="presentation"
+          :class-object="classObject.components.contentArea"
+        />
+        <!-- sponsor -->
+        <figure
+          class="col-span-7 md:col-start-5 md:col-span-3 lg:col-start-6 lg:col-span-6 row-span-1 flex flex-col p-6 text-center"
+        >
+          <template
+            v-for="(affiliate, index) in getSponsors(conference.affiliates)"
+            :key="index"
+          >
+            <h3
+              v-if="index === 0"
+              :class="classBinding(classObject, 'sponsoredByText', 'hidden')"
+            >
+              Sponsored by:
+            </h3>
+            <CommonComponentsSponsor
+              :sponsor="affiliate"
+              :class-object="{
+                labelImageContainer: 'block',
+                sponsorContainer: 'img-mx-auto',
+              }"
+            />
+          </template>
+        </figure>
+      </div>
+    </div>
+  </div>
+</template>