@icvdeveloper/common-module 0.0.1

package/dist/runtime/assets/svg/peer2peer.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="84" viewBox="0 0 120 84">
+  <image x="8" y="16" width="104" height="55" xlink:href="data:img/png;base64,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"/>
+</svg>

package/dist/runtime/assets/svg/phone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>

package/dist/runtime/assets/svg/plus-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#e3effa" width="15" height="15" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>

package/dist/runtime/assets/svg/red-icon.svg

@@ -0,0 +1,3 @@
+<svg class="h-2 w-2 fill-current text-red mr-2" viewBox="0 0 20 20">
+    <circle cx="10" cy="10" r="10"/>
+</svg>

package/dist/runtime/assets/svg/reject.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="50px" height="50px" viewBox="0 0 525 525" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+    <title>reject</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Video-Call-yes-no-(1)" transform="translate(-622.000000, -134.000000)">
+            <g id="reject" transform="translate(622.000000, 134.000000)">
+                <circle id="Oval" fill="#9F2214" cx="262.32" cy="262.62" r="262.12"></circle>
+                <path d="M431.13,324.68 C439.848013,309.180629 442.302617,290.932119 437.99,273.68 C416.99,187.68 263.99,190.13 263.99,190.13 C263.99,190.13 111,182.69 87.24,267.92 C82.3719639,285.020231 84.2288246,303.334817 92.43,319.11 L92.5,319.26 C96.787592,327.204682 105.735171,331.447697 114.6,329.74 L185.18,316.46 C185.18,316.46 208.36,310.18 206.24,290.15 C205.764001,286.286139 204.631018,282.532076 202.89,279.05 C199.05,267.58 192.23,250.83 184.23,247.22 C194.73,243.76 220.14,237.37 263.05,238.07 C305.96,238.77 331.14,246 341.52,249.8 C333.41,253.15 326.05,269.66 321.82,281.01 C319.970001,284.440405 318.715528,288.159869 318.11,292.01 C315.33,311.95 338.29,319.01 338.29,319.01 L408.61,334.65 C417.413254,336.643207 426.492273,332.696687 431.04,324.9 L431.13,324.68 Z" id="Path" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/runtime/assets/svg/search-icon.svg

@@ -0,0 +1,3 @@
+<svg class="fill-current text-grey h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
+</svg>

package/dist/runtime/components/affiliates/AffiliatePage.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Affiliate } from "../../models/affiliate";
+import { Sponsor } from "../../models/conference";
+
+type Props = {
+  affiliate: Affiliate | Sponsor;
+};
+
+const props = defineProps<Props>();
+
+const { affiliate } = toRefs(props);
+</script>
+
+<template>
+  <div class="flex w-full flex-col"></div>
+</template>

package/dist/runtime/components/agenda/AgendaTabbed.vue

@@ -0,0 +1,342 @@
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { useAgenda } from "../../composables/useAgenda";
+import { Conference, Sponsor as SponsorType } from "../../models/conference";
+import { useDateFormat } from "../../composables/useDateFormat";
+import { usePresentation } from "../../composables/usePresentation";
+import { usePresenters } from "../../composables/usePresenters";
+import CommonAccordion from "../layouts/Accordion.vue";
+import Sponsor from "./components/Sponsor.vue";
+import PresentationLink from "./components/PresentationLink.vue";
+
+type Props = {
+  conference: Conference;
+};
+
+const props = defineProps<Props>();
+
+const { conference } = toRefs(props);
+
+// Methods
+const {
+  days,
+  enabledSponsors,
+  displayTrackGroups,
+  horizontalTrackGroups,
+  selectedDay,
+  setSelectedDay,
+  selectedPresenter,
+  showTabDates,
+  shouldShowSponsors,
+  getCombinedTrackList,
+  hasPresentations,
+  isSmallGroupedTrack,
+  isGroupedTrack,
+  getTracks,
+  getTrackClasses,
+  showInfoLink,
+  useAccordion,
+  usePresenterModal,
+  showPresenterDescription,
+} = useAgenda(conference);
+const {
+  showPresentationTimes,
+  showPresentationEndTimes,
+  getPresentationEndTime,
+} = usePresentation(conference);
+const { getPresentersLabel, getSortedPresenters } = usePresenters(conference);
+
+const { formatDate, formatTimezoneToLocal } = useDateFormat();
+
+// computed
+const presentersContainer = computed(() => {
+  return useAccordion() ? CommonAccordion : "div";
+});
+</script>
+
+<template>
+  <div class="container mx-auto my-8 shadow-lg">
+    <!-- TABS -->
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row w-full">
+        <div
+          v-if="days.length > 0"
+          class="flex flex-row agenda-tab-sponsor-bg-color w-3/4"
+        >
+          <button
+            v-for="(day, index) in days"
+            :key="index"
+            class="flex-1 md:flex-initial py-5 px-4 md:px-6 text-base text-center cursor-pointer no-underline heading-color-2 focus:outline-none"
+            :class="{
+              'agenda-tab-active-bg-color agenda-tab-color':
+                day === selectedDay,
+              'agenda-tab-bg-color agenda-tab-color': day !== selectedDay,
+            }"
+            @click="setSelectedDay(day)"
+          >
+            {{ day.name }}
+            <small v-if="showTabDates(day)">{{ formatDate(day.date) }}</small>
+          </button>
+        </div>
+
+        <div
+          class="flex w-1/4 items-center agenda-tab-sponsor-bg-color flex-row-reverse pr-5"
+        >
+          <Sponsor
+            v-if="shouldShowSponsors(selectedDay)"
+            :sponsor="selectedDay.sponsors[0]"
+            :show-label="false"
+            size="small"
+            :enabled-sponsors="enabledSponsors"
+          >
+          </Sponsor>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-for="group_or_track in getCombinedTrackList(selectedDay)"
+      :key="group_or_track.id"
+      class="text-center lg:text-left"
+    >
+      <div v-if="hasPresentations(group_or_track)">
+        <!-- TRACK GROUP -->
+        <div
+          v-if="
+            displayTrackGroups != 'None' && group_or_track.type == 'track_group'
+          "
+          class="agenda-track-group-bg-color"
+        >
+          <div class="py-3">
+            <h2 class="font-light py-2 px-3 body-color-2">
+              {{ group_or_track.name }}
+            </h2>
+          </div>
+        </div>
+
+        <!-- ALL TRACKS CONTAINER -->
+        <div
+          class="bg-color-white"
+          :class="{ 'tracks-container': isSmallGroupedTrack(group_or_track) }"
+        >
+          <!-- TRACK + SESSIONS CONTAINER -->
+          <div
+            v-for="(track, trackIndex) in getTracks(group_or_track)"
+            :key="track.id"
+            class="track-container"
+          >
+            <!-- TRACK NAME + SPONSOR -->
+            <div
+              class="track-header flex flex-col min-w-full agenda-track-bg-color"
+              :class="getTrackClasses(group_or_track, trackIndex)"
+            >
+              <!-- TRACK NAME -->
+              <div
+                class="flex-1 py-3"
+                :class="{
+                  'lg:w-3/4':
+                    !isSmallGroupedTrack(group_or_track) &&
+                    track.sponsors.length,
+                }"
+              >
+                <h2
+                  class="font-light p-2 md:py-2 sm:px-3 body-color-2"
+                  :class="{
+                    'agenda-grouped-track-text-color text-lg':
+                      isGroupedTrack(group_or_track),
+                  }"
+                >
+                  {{ track.name }}
+                </h2>
+              </div>
+              <!-- TRACK SPONSOR -->
+              <div
+                v-if="track.sponsors.length"
+                class="flex w-full pb-2 content-center items-center"
+                :class="{
+                  'lg:pb-0 lg:w-1/4 lg:pr-5':
+                    !isSmallGroupedTrack(group_or_track),
+                }"
+              >
+                <sponsor
+                  v-if="shouldShowSponsors(track)"
+                  :sponsor="track.sponsors[0]"
+                  :inline="true"
+                  size="small"
+                  :enabled-sponsors="enabledSponsors"
+                >
+                </sponsor>
+              </div>
+            </div>
+            <!-- ALL TRACK SESSIONS -->
+            <div
+              class="track-sessions"
+              :class="{ 'border-l': horizontalTrackGroups && trackIndex > 0 }"
+            >
+              <!-- EACH SESSION -->
+              <div
+                v-for="(presentation, presentationIndex) in track.presentations"
+                :key="presentation.id"
+              >
+                <div
+                  v-if="presentation.visible"
+                  class="flex flex-col"
+                  :class="
+                    presentationIndex < track.presentations.length - 1
+                      ? 'border-b'
+                      : ''
+                  "
+                >
+                  <!-- SESSION TIME, NAME & SPONSOR CONTAINER -->
+                  <div
+                    class="flex flex-col flex-1 items-center lg:items-start p-5"
+                    :class="{
+                      'bg-color-white-darker':
+                        selectedPresenter &&
+                        selectedPresenter.presentationId === presentation.id,
+                      'lg:flex-row': !isSmallGroupedTrack(group_or_track),
+                    }"
+                  >
+                    <!-- TIME + NAME CONTAINER -->
+                    <div
+                      class="flex-1"
+                      :class="{
+                        'pb-2': presentation.sponsors.length,
+                        'lg:pb-0 lg:w-3/4':
+                          !isSmallGroupedTrack(group_or_track) &&
+                          presentation.sponsors.length,
+                      }"
+                    >
+                      <!-- TIME -->
+                      <h4
+                        v-if="showPresentationTimes(presentation)"
+                        class="font-light mb-3"
+                      >
+                        {{
+                          formatTimezoneToLocal(
+                            presentation.date,
+                            "h:m a",
+                            conference.timezone
+                          )
+                        }}
+
+                        <span v-if="showPresentationEndTimes()"
+                          >- {{ getPresentationEndTime(presentation) }}</span
+                        >
+                        {{
+                          formatTimezoneToLocal(
+                            presentation.date,
+                            "z",
+                            conference.timezone
+                          )
+                        }}
+                      </h4>
+
+                      <!-- NAME + PLAY BUTTON -->
+                      <div class="pb-1">
+                        <presentation-link
+                          :conference="conference"
+                          :track="track"
+                          :presentation="presentation"
+                          :show-info-link="showInfoLink()"
+                          :is-small-grouped-track="
+                            isSmallGroupedTrack(group_or_track)
+                          "
+                        ></presentation-link>
+                      </div>
+
+                      <!-- PRESENTERS LIST (ACCORDION OR STANDARD/DIV) -->
+                      <component
+                        :is="presentersContainer"
+                        v-if="presentation.presenters.length > 0"
+                        :title="
+                          getPresentersLabel(presentation.presenters.length)
+                        "
+                      >
+                        <p
+                          v-for="presenter in getSortedPresenters(
+                            presentation.presenters
+                          )"
+                          :key="presenter.id"
+                          class="font-bold my-1"
+                        >
+                          <CommonPresenterModal
+                            v-if="usePresenterModal"
+                            :use-icon="false"
+                            :presenter="presenter"
+                            :is-small-grouped-track="
+                              isSmallGroupedTrack(group_or_track)
+                            "
+                          ></CommonPresenterModal>
+                          <CommonPresenterListing
+                            v-else
+                            :presenter="presenter"
+                            :enable-bio="true"
+                            :show-bio="false"
+                            text-class="font-bold text-base"
+                            link-class="agenda-presenter-color"
+                            :is-small-grouped-track="
+                              isSmallGroupedTrack(group_or_track)
+                            "
+                            @clicked="
+                              showPresenterDescription(presenter, presentation)
+                            "
+                          />
+                        </p>
+                      </component>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tracks-container {
+  display: grid;
+  grid-auto-columns: 1fr;
+}
+
+.tracks-container .track-container {
+  display: contents;
+}
+
+.tracks-container .track-container:nth-child(4n + 1) .track-header {
+  grid-row: 1;
+  grid-column: 1;
+}
+.tracks-container .track-container:nth-child(4n + 2) .track-header {
+  grid-row: 1;
+  grid-column: 2;
+}
+.tracks-container .track-container:nth-child(4n + 3) .track-header {
+  grid-row: 1;
+  grid-column: 3;
+}
+.tracks-container .track-container:nth-child(4n + 4) .track-header {
+  grid-row: 1;
+  grid-column: 4;
+}
+
+.tracks-container .track-container:nth-child(4n + 1) .track-sessions {
+  grid-row: 2;
+  grid-column: 1;
+}
+.tracks-container .track-container:nth-child(4n + 2) .track-sessions {
+  grid-row: 2;
+  grid-column: 2;
+}
+.tracks-container .track-container:nth-child(4n + 3) .track-sessions {
+  grid-row: 2;
+  grid-column: 3;
+}
+.tracks-container .track-container:nth-child(4n + 4) .track-sessions {
+  grid-row: 2;
+  grid-column: 4;
+}
+</style>

package/dist/runtime/components/agenda/components/InfoLink.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { Presentation } from "../../../models/conference";
+
+type Props = {
+  linkText: string;
+  presentation: Presentation;
+  useIcon?: boolean;
+  newLine?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  useIcon: true,
+  newLine: false,
+});
+
+// data
+const { useIcon, newLine, linkText, presentation } = toRefs(props);
+const showDescModal = ref<boolean>(false);
+
+// computed
+const getLinkText = computed(() => {
+  return linkText.value.length > 0 ? linkText.value : "Session Details";
+});
+</script>
+
+<template>
+  <span>
+    <a class="cursor-pointer" @click="showDescModal = true">
+      <CommonSvgIcon
+        v-if="useIcon"
+        icon="info"
+        class="align-middle"
+        style="display: inline-block; margin-bottom: 2px"
+        :icon-width="'16px'"
+      ></CommonSvgIcon>
+      <span v-else class="text-xs" :class="{ 'new-line': newLine }">{{
+        getLinkText
+      }}</span>
+    </a>
+
+    <CommonModal :visible="showDescModal" @trigger="showDescModal = false">
+      <template #modal-title>
+        <div class="text-lg font-bold text-left mb-4 pb-4 border-b">
+          {{ presentation.name }}
+        </div>
+      </template>
+      <template #modal-body>
+        <div
+          class="text-base font-normal text-left"
+          v-html="presentation.description"
+        ></div>
+      </template>
+    </CommonModal>
+  </span>
+</template>

package/dist/runtime/components/agenda/components/PlayIcon.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { usePresentation } from "../../../composables/usePresentation";
+import { Conference, Presentation } from "../../../models/conference";
+import { Icons } from "../../../models/icons";
+
+type Props = {
+  icon?: keyof Icons;
+  conference: Conference;
+  presentation: Presentation;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: "playarrow",
+});
+
+const { icon, conference, presentation } = toRefs(props);
+
+const {
+  showPresentationPlayIcon,
+  getPresentationCustomPlayIcon,
+  getPresentationStreamingText,
+} = usePresentation(conference);
+</script>
+
+<template>
+  <span class="flex-initial flex flex-row items-center py-2 lg:py-1">
+    <span v-if="showPresentationPlayIcon(presentation)">
+      <img
+        v-if="getPresentationCustomPlayIcon(presentation)"
+        style="max-width: 15px"
+        :src="(getPresentationCustomPlayIcon(presentation) as unknown as string)"
+        alt=""
+      />
+      <CommonSvgIcon
+        v-else
+        :icon="icon"
+        class="align-middle mr-1"
+        style="display: inline-block; margin-bottom: 2px"
+        :icon-width="'20px'"
+      >
+      </CommonSvgIcon
+      >&nbsp;
+    </span>
+    <small class="flex-initial uppercase text-base text-red-darker">{{
+      getPresentationStreamingText(presentation)
+    }}</small>
+  </span>
+</template>

package/dist/runtime/components/agenda/components/PresentationLink.vue

@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+import { useAgenda } from "../../../composables/useAgenda";
+import { useConferenceHelpers } from "../../../composables/useConferenceHelpers";
+import { usePresentation } from "../../../composables/usePresentation";
+import {
+  Conference,
+  Presentation,
+  Track,
+  TrackGroup,
+} from "../../../models/conference";
+import InfoLink from "./InfoLink.vue";
+import PlayIcon from "./PlayIcon.vue";
+
+type Props = {
+  conference: Conference;
+  presentation: Presentation;
+  track: Track | TrackGroup;
+  showInfoLink?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  showInfoLink: true,
+});
+
+const { conference, track, presentation } = toRefs(props);
+
+// Methods
+const { conferenceIsLive, conferenceIsArchived } =
+  useConferenceHelpers(conference);
+const { isSmallGroupedTrack } = useAgenda(conference);
+const {
+  getPresentationLinkTarget,
+  getLivePresentationLinkDestination,
+  showPresentationLinkIcon,
+  getPresentationLinkText,
+  presentationIsLiveOrMixed,
+  getArchivePresentationLinkDestination,
+} = usePresentation(conference);
+
+// Computed
+const presentationNameClass = computed(() => {
+  return isSmallGroupedTrack(track.value) ? "text-base" : "text-lg";
+});
+</script>
+
+<template>
+  <div>
+    <!-- LIVE AGENDA GO TO WEBCAST PAGE -->
+    <div v-if="conferenceIsLive()">
+      <div class="flex flex-col flex-wrap py-1">
+        <h2 class="flex-initial" :class="presentationNameClass">
+          <!-- zoom text link -->
+          <CommonZoomModal
+            v-if="presentation.type == 'zoom'"
+            :presentation-id="presentation.id"
+            modal-size="full"
+          >
+            <template #modal-link>
+              <span class="font-semibold no-underline heading-link">{{
+                presentation.name
+              }}</span>
+            </template>
+          </CommonZoomModal>
+
+          <!-- stream text link -->
+          <a
+            v-else
+            class="font-semibold no-underline heading-link"
+            :target="getPresentationLinkTarget(presentation)"
+            :href="getLivePresentationLinkDestination(presentation, track)"
+            >{{ presentation.name }}</a
+          >
+
+          <!-- session details -->
+          <InfoLink
+            v-if="showInfoLink && presentation.description"
+            :presentation="presentation"
+            :use-icon="showPresentationLinkIcon()"
+            :link-text="getPresentationLinkText()"
+            :new-line="isSmallGroupedTrack(track)"
+            class="ml-1"
+          ></InfoLink>
+        </h2>
+
+        <!-- zoom icon link -->
+        <CommonZoomModal
+          v-if="presentation.type == 'zoom'"
+          :presentation-id="presentation.id"
+          modal-size="full"
+        >
+          <template #modal-link>
+            <PlayIcon
+              :presentation="presentation"
+              :conference="conference"
+              :class="'justify-center md:justify-start'"
+              icon="zoom"
+            ></PlayIcon>
+          </template>
+        </CommonZoomModal>
+        <!-- stream icon link -->
+        <a
+          v-else
+          class="no-underline"
+          :target="getPresentationLinkTarget(presentation)"
+          :href="getLivePresentationLinkDestination(presentation, track)"
+        >
+          <PlayIcon
+            v-if="presentationIsLiveOrMixed(presentation)"
+            :presentation="presentation"
+            :conference="conference"
+            :class="'justify-center md:justify-start'"
+            icon="playarrow"
+          ></PlayIcon>
+        </a>
+      </div>
+    </div>
+    <!-- ARCHIVE AGENDA GO TO MEDIA PAGE -->
+    <div v-if="conferenceIsArchived()">
+      <h2 class="font-semibold" :class="presentationNameClass">
+        <a
+          class="no-underline heading-link"
+          :target="getPresentationLinkTarget(presentation)"
+          :href="getArchivePresentationLinkDestination(presentation)"
+          >{{ presentation.name }}</a
+        >
+        <a
+          :target="getPresentationLinkTarget(presentation)"
+          :href="getArchivePresentationLinkDestination(presentation)"
+          ><CommonSvgIcon
+            icon="playarrow"
+            class="ml-1 align-middle"
+            style="display: inline-block; margin-bottom: 2px"
+            :icon-width="'20px'"
+          ></CommonSvgIcon
+        ></a>
+        <InfoLink
+          v-if="showInfoLink && presentation.description"
+          :presentation="presentation"
+          :use-icon="showPresentationLinkIcon()"
+          :link-text="getPresentationLinkText()"
+          :new-line="isSmallGroupedTrack(track)"
+          class="ml-1"
+        ></InfoLink>
+      </h2>
+    </div>
+  </div>
+</template>