@icvdeveloper/common-module 0.0.114 → 0.0.116

package/dist/runtime/components/events/ListEvents.vue

@@ -1,569 +1,556 @@
-<script lang="ts" setup>
-import { ref, toRefs, computed } from "vue";
-import { storeToRefs } from "pinia";
-import { useConferencesStore } from "../../store/conferences";
-import { useTemplateConfigsStore } from "../../store/templateConfigs";
-import { useDateFormat } from "../../composables/useDateFormat";
-import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
-import { useEvents } from "../../composables/useEvents";
-import { useClassBinding } from "../../composables/useClassBinding";
-import CommonSponsor from "../agenda/components/Sponsor.vue";
-import { Conference, ConferenceState } from "../../models/conference";
-import { Position } from "../../enums/general";
-import {
-  listEventsClassObj,
-  listEventsCompObj,
-  countdownTimerClassObj,
-  sponsorClassObj,
-} from "../../@types/components";
-
-interface Props {
-  showSponsors?: boolean;
-  showBrand?: boolean;
-  showCountdown?: boolean;
-  liveButton?: boolean;
-  mediaButton?: boolean;
-  registerButton?: boolean;
-  loginButton?: boolean;
-  viewInfoButton?: boolean;
-  registerPathPrefix?: string;
-  eventPathPrefix?: string;
-  liveButtonOpensStream?: boolean;
-  isUpcoming?: boolean;
-  showEventImage?: boolean;
-  sponsorPosition?: Position;
-  borderPosition?: Position;
-  countdownPosition?: Position;
-  classObject?: listEventsClassObj;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  showSponsors: true,
-  showBrand: true,
-  showCountdown: true,
-  liveButton: false,
-  mediaButton: true,
-  registerButton: true,
-  loginButton: true,
-  viewInfoButton: true,
-  registerPathPrefix: "",
-  eventPathPrefix: "",
-  liveButtonOpensStream: true,
-  isUpcoming: true,
-  showEventImage: true,
-  sponsorPosition: Position.RIGHT,
-  borderPosition: Position.MIDDLE,
-  countdownPosition: Position.BOTTOM,
-  classObject: () => {
-    return {
-      components: ref<listEventsCompObj>({
-        countdownTimer: ref<countdownTimerClassObj>({}),
-        sponsor: ref<sponsorClassObj>({}),
-      }),
-    };
-  },
-});
-
-const {
-  showSponsors,
-  showBrand,
-  showCountdown,
-  liveButton,
-  mediaButton,
-  registerButton,
-  registerPathPrefix,
-  loginButton,
-  viewInfoButton,
-  isUpcoming,
-  showEventImage,
-  sponsorPosition,
-  borderPosition,
-  countdownPosition,
-  classObject,
-} = toRefs(props);
-
-// data
-const { pastEvents, upcomingEvents } = storeToRefs(useConferencesStore());
-
-// methods
-const { globalConfigValue, pagesConfigValue } = storeToRefs(
-  useTemplateConfigsStore()
-);
-const { formatDate } = useDateFormat();
-const {
-  isSingleDayEvent,
-  showConferenceViewButton,
-  getConferenceWebcastUrl,
-  getConferenceWebcastButtonText,
-  showViewArchiveButton,
-  getViewArchiveUrl,
-  getViewArchiveButtonText,
-  getConferenceRegUrl,
-  getConferenceRegText,
-  showConferenceRegButton,
-} = useConferenceHelpers();
-
-const {
-  isLoggedIn,
-  loginModalVisible,
-  conferenceToLoginTo,
-  goEventPage,
-  setConferenceToLoginTo,
-  buttonClass,
-  getSponsors,
-  getBrand,
-  isHomePage,
-} = useEvents();
-
-const { classBinding } = useClassBinding();
-
-const showViewButton = (_conference: Conference): boolean => {
-  return isUpcoming.value
-    ? showConferenceViewButton(_conference)
-    : showViewArchiveButton(_conference);
-};
-
-const getVideoUrl = (_conference: Conference): string => {
-  return isUpcoming.value
-    ? getConferenceWebcastUrl(_conference)
-    : getViewArchiveUrl(_conference);
-};
-
-const getVideoButtonText = (_conference: Conference): string => {
-  return isUpcoming.value
-    ? getConferenceWebcastButtonText(_conference)
-    : getViewArchiveButtonText(_conference);
-};
-
-// computed
-const eventType = computed((): Conference[] => {
-  return isUpcoming.value ? upcomingEvents.value : pastEvents.value;
-});
-
-const showLoginButton = computed((): boolean => {
-  const archivedHomepage: boolean =
-    isUpcoming.value || (!isUpcoming.value && isHomePage.value);
-  return (
-    archivedHomepage &&
-    loginButton.value &&
-    !isLoggedIn.value &&
-    !globalConfigValue.value("townhall_registration_enabled")
-  );
-});
-</script>
-
-<template>
-  <!-- list container -->
-  <div class="flex w-full flex-col">
-    <!-- list container -->
-    <div
-      :class="
-        classBinding(classObject, 'listContainer', 'container flex-1 mx-auto')
-      "
-    >
-      <!-- individual event container -->
-      <div
-        v-for="conference in eventType"
-        :key="conference.id"
-        :class="[
-          {
-            'border-1 border-t border-color-accent-2':
-              borderPosition === Position.TOP,
-          },
-          classBinding(
-            classObject,
-            'eventContainer',
-            'flex flex-col items-center md:flex-row py-4'
-          ),
-        ]"
-      >
-        <!-- event image -->
-        <div
-          v-if="showEventImage"
-          :class="
-            classBinding(
-              classObject,
-              'eventImageContainer',
-              'flex w-full md:w-1/3 pb-3 px-3 md:px-6 overflow-hidden'
-            )
-          "
-        >
-          <img
-            :class="
-              classBinding(
-                classObject,
-                'eventImage',
-                'flex-1 self-center mx-auto w-full'
-              )
-            "
-            :src="conference.photo"
-          />
-        </div>
-        <!-- event details container -->
-        <div
-          :class="[
-            { 'md:w-2/3': showEventImage },
-            classBinding(
-              classObject,
-              'eventContentContainer',
-              'flex flex-col justify-center text-center w-full md:pr-6 md:text-left md:justify-start md:items-start'
-            ),
-          ]"
-        >
-          <!-- event brand, name, date and countdown container -->
-          <div
-            :class="[
-              {
-                'border-1 border-b border-color-accent-2 mb-6':
-                  borderPosition === Position.MIDDLE,
-              },
-              classBinding(
-                classObject,
-                'eventDetailsContainer',
-                'w-full flex flex-col lg:flex-row'
-              ),
-            ]"
-          >
-            <!-- event details -->
-            <div
-              :class="classBinding(classObject, 'eventDetails', 'flex-grow')"
-            >
-              <template v-if="showBrand && getBrand(conference.affiliates)">
-                <a
-                  v-if="getBrand(conference.affiliates).website"
-                  :class="classBinding(classObject, 'eventBrandLink', '')"
-                  :href="getBrand(conference.affiliates).website"
-                  target="_blank"
-                >
-                  <h3
-                    :class="
-                      classBinding(
-                        classObject,
-                        'eventBrand',
-                        'text-base font-bold leading-tight tracking-wide mb-3'
-                      )
-                    "
-                  >
-                    {{ getBrand(conference.affiliates).name }}
-                  </h3>
-                </a>
-                <h3
-                  v-else
-                  :class="
-                    classBinding(
-                      classObject,
-                      'eventBrand',
-                      'text-base font-bold leading-tight tracking-wide mb-3'
-                    )
-                  "
-                >
-                  {{ getBrand(conference.affiliates).name }}
-                </h3>
-              </template>
-              <nuxt-link
-                :to="
-                  eventPathPrefix
-                    ? eventPathPrefix + conference.id
-                    : `/${isUpcoming ? 'upcoming-events' : 'past-events'}/${
-                        conference.id
-                      }`
-                "
-                class="no-underline"
-              >
-                <h2
-                  :class="
-                    classBinding(
-                      classObject,
-                      'eventName',
-                      'text-2xl lg:text-3xl font-medium mb-2 conf-name-alignment'
-                    )
-                  "
-                >
-                  {{ conference.name }}
-                </h2>
-              </nuxt-link>
-              <p
-                :class="
-                  classBinding(
-                    classObject,
-                    'eventDate',
-                    'text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg'
-                  )
-                "
-              >
-                {{ formatDate(conference.start_date) }}
-                <span v-if="!isSingleDayEvent(conference)">
-                  - {{ formatDate(conference.end_date) }}</span
-                >
-              </p>
-            </div>
-            <!-- countdown timer - top-aligned -->
-            <div
-              v-if="
-                isUpcoming &&
-                showCountdown &&
-                countdownPosition === Position.TOP &&
-                pagesConfigValue('main.countdown_timer')
-              "
-              :class="
-                classBinding(
-                  classObject,
-                  'countdownContainerTop',
-                  'flex-auto flex items-center self-center mb-4 lg:mb-0'
-                )
-              "
-            >
-              <CommonCountdownTimer
-                :date="conference.start_date"
-                :is-compact="true"
-                :class-object="classObject.components.countdownTimer"
-              ></CommonCountdownTimer>
-            </div>
-          </div>
-          <!-- event button, countdown timer, and sponsors container -->
-          <div
-            :class="
-              classBinding(
-                classObject,
-                'buttonCountdownSponsorsContainer',
-                'flex flex-col w-full'
-              )
-            "
-          >
-            <div
-              :class="
-                classBinding(
-                  classObject,
-                  'buttonCountdownContainer',
-                  'flex-1 flex flex-col justify-between xl:flex-row w-full'
-                )
-              "
-            >
-              <div
-                :class="
-                  classBinding(
-                    classObject,
-                    'buttonContainer',
-                    'flex-auto mr-0 xl:mr-4'
-                  )
-                "
-              >
-                <!-- live event button - if enabled, hide all other buttons if event is live -->
-                <template
-                  v-if="liveButton && conference.state === ConferenceState.LIVE"
-                >
-                  <!-- go to video -->
-                  <a
-                    v-if="liveButtonOpensStream"
-                    :href="getVideoUrl(conference)"
-                    :target="
-                      /^http/.test(!isUpcoming && getVideoUrl(conference))
-                        ? '_blank'
-                        : '_self'
-                    "
-                  >
-                    <button
-                      :class="
-                        classBinding(classObject, 'liveButtonItem', buttonClass)
-                      "
-                    >
-                      {{ getVideoButtonText(conference) }}
-                    </button>
-                  </a>
-                  <!-- go to event page -->
-                  <button
-                    v-else
-                    :class="
-                      classBinding(classObject, 'liveButtonItem', buttonClass)
-                    "
-                    @click="goEventPage(conference, eventPathPrefix)"
-                  >
-                    {{ getVideoButtonText(conference) }}
-                  </button>
-                </template>
-
-                <template v-else>
-                  <!-- view info button -->
-                  <button
-                    v-if="viewInfoButton"
-                    :class="
-                      classBinding(classObject, 'buttonItem', buttonClass)
-                    "
-                    @click="goEventPage(conference, eventPathPrefix)"
-                  >
-                    More Info
-                  </button>
-                  <!-- view live/preview archive button -->
-                  <a
-                    v-if="mediaButton && showViewButton(conference)"
-                    :href="getVideoUrl(conference)"
-                    :target="
-                      /^http/.test(!isUpcoming && getVideoUrl(conference))
-                        ? '_blank'
-                        : '_self'
-                    "
-                  >
-                    <button
-                      :class="
-                        classBinding(classObject, 'buttonItem', buttonClass)
-                      "
-                    >
-                      {{ getVideoButtonText(conference) }}
-                    </button>
-                  </a>
-
-                  <!-- login button -->
-                  <button
-                    v-if="showLoginButton"
-                    :class="
-                      classBinding(classObject, 'buttonItem', buttonClass)
-                    "
-                    @click="setConferenceToLoginTo(conference)"
-                  >
-                    Log In
-                  </button>
-
-                  <!-- register button -->
-                  <a
-                    v-if="registerButton && showConferenceRegButton(conference)"
-                    :href="getConferenceRegUrl(conference, registerPathPrefix)"
-                    :target="
-                      /^http/.test(getConferenceRegUrl(conference))
-                        ? '_blank'
-                        : '_self'
-                    "
-                  >
-                    <button
-                      :class="
-                        classBinding(classObject, 'buttonItem', buttonClass)
-                      "
-                    >
-                      {{ getConferenceRegText(conference) }}
-                    </button>
-                  </a>
-                </template>
-              </div>
-              <!-- countdown timer - right-aligned -->
-              <div
-                v-if="
-                  isUpcoming &&
-                  showCountdown &&
-                  countdownPosition === Position.RIGHT &&
-                  pagesConfigValue('main.countdown_timer')
-                "
-                class="flex-auto md:flex mt-3 md:mt-2"
-                :class="
-                  classBinding(
-                    classObject,
-                    'countdownContainerRight',
-                    'flex-auto flex items-center self-center mb-4 lg:mb-0'
-                  )
-                "
-              >
-                <CommonCountdownTimer
-                  :date="conference.start_date"
-                  :is-compact="true"
-                  :class-object="classObject.components.countdownTimer"
-                ></CommonCountdownTimer>
-              </div>
-            </div>
-            <!-- countdown timer - bottom-aligned -->
-            <div
-              v-if="
-                isUpcoming &&
-                showCountdown &&
-                countdownPosition === Position.BOTTOM &&
-                pagesConfigValue('main.countdown_timer')
-              "
-              :class="
-                classBinding(
-                  classObject,
-                  'countdownContainerBottom',
-                  'flex-auto md:flex my-3 md:my-2'
-                )
-              "
-            >
-              <CommonCountdownTimer
-                :date="conference.start_date"
-                :is-compact="true"
-                :class-object="classObject.components.countdownTimer"
-              ></CommonCountdownTimer>
-            </div>
-            <!-- sponsors container - bottom-aligned -->
-            <div
-              v-if="showSponsors && sponsorPosition === Position.BOTTOM"
-              class=""
-              :class="
-                classBinding(
-                  classObject,
-                  'sponsorsContainer',
-                  'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-y-1.5 gap-x-3'
-                )
-              "
-            >
-              <!-- individual sponsor -->
-              <template
-                v-for="(affiliate, index) in getSponsors(conference.affiliates)"
-                :key="index"
-              >
-                <h3
-                  v-if="index === 0"
-                  :class="
-                    classBinding(classObject, 'sponsoredByText', 'hidden')
-                  "
-                >
-                  Sponsored by:
-                </h3>
-                <CommonSponsor
-                  v-if="affiliate.photo"
-                  :sponsor="affiliate"
-                  :class-object="classObject.components.sponsor"
-                ></CommonSponsor>
-              </template>
-            </div>
-          </div>
-        </div>
-        <!-- sponsors container - right-aligned -->
-        <div
-          v-if="showSponsors && sponsorPosition === Position.RIGHT"
-          class="flex flex-col"
-        >
-          <!-- individual sponsor -->
-          <template
-            v-for="(affiliate, index) in getSponsors(conference.affiliates)"
-            :key="index"
-          >
-            <h3
-              v-if="index === 0"
-              :class="classBinding(classObject, 'sponsoredByText', 'hidden')"
-            >
-              Sponsored by:
-            </h3>
-            <CommonSponsor
-              v-if="affiliate.photo"
-              :sponsor="affiliate"
-              :class-object="classObject.components.sponsor"
-            ></CommonSponsor>
-          </template>
-        </div>
-      </div>
-    </div>
-    <!-- login modal -->
-    <CommonModal
-      :visible="loginModalVisible"
-      :class="classObject.components.modal"
-      @trigger="loginModalVisible = false"
-    >
-      <template #modal-body>
-        <CommonLoginFullWidth
-          :conference="conferenceToLoginTo"
-          :class="classObject.components.login"
-        />
-      </template>
-    </CommonModal>
-  </div>
-</template>
-
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useConferencesStore } from "../../store/conferences";
+import { useTemplateConfigsStore } from "../../store/templateConfigs";
+import { useDateFormat } from "../../composables/useDateFormat";
+import { useConferenceHelpers } from "../../composables/useConferenceHelpers";
+import { useEvents } from "../../composables/useEvents";
+import { useClassBinding } from "../../composables/useClassBinding";
+import CommonSponsor from "../agenda/components/Sponsor.vue";
+import { Conference, ConferenceState } from "../../models/conference";
+import { Position } from "../../enums/general";
+import {
+  listEventsClassObj,
+  listEventsCompObj,
+  countdownTimerClassObj,
+  sponsorClassObj,
+} from "../../@types/components";
+
+interface Props {
+  showSponsors?: boolean;
+  showBrand?: boolean;
+  showCountdown?: boolean;
+  liveButton?: boolean;
+  mediaButton?: boolean;
+  registerButton?: boolean;
+  loginButton?: boolean;
+  viewInfoButton?: boolean;
+  registerPathPrefix?: string;
+  eventPathPrefix?: string;
+  liveButtonOpensStream?: boolean;
+  isUpcoming?: boolean;
+  showEventImage?: boolean;
+  sponsorPosition?: Position;
+  borderPosition?: Position;
+  countdownPosition?: Position;
+  classObject?: listEventsClassObj;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showSponsors: true,
+  showBrand: true,
+  showCountdown: true,
+  liveButton: false,
+  mediaButton: true,
+  registerButton: true,
+  loginButton: true,
+  viewInfoButton: true,
+  registerPathPrefix: "",
+  eventPathPrefix: "",
+  liveButtonOpensStream: true,
+  isUpcoming: true,
+  showEventImage: true,
+  sponsorPosition: Position.RIGHT,
+  borderPosition: Position.MIDDLE,
+  countdownPosition: Position.BOTTOM,
+  classObject: () => {
+    return {
+      components: ref<listEventsCompObj>({
+        countdownTimer: ref<countdownTimerClassObj>({}),
+        sponsor: ref<sponsorClassObj>({}),
+      }),
+    };
+  },
+});
+
+const {
+  showSponsors,
+  showBrand,
+  showCountdown,
+  liveButton,
+  mediaButton,
+  registerButton,
+  registerPathPrefix,
+  loginButton,
+  viewInfoButton,
+  isUpcoming,
+  showEventImage,
+  sponsorPosition,
+  borderPosition,
+  countdownPosition,
+  classObject,
+} = toRefs(props);
+
+// data
+const { pastEvents, upcomingEvents } = storeToRefs(useConferencesStore());
+
+// methods
+const { globalConfigValue, pagesConfigValue } = storeToRefs(
+  useTemplateConfigsStore()
+);
+const { formatDate } = useDateFormat();
+const {
+  isSingleDayEvent,
+  showConferenceViewButton,
+  getConferenceWebcastUrl,
+  getConferenceWebcastButtonText,
+  showViewArchiveButton,
+  getViewArchiveUrl,
+  getViewArchiveButtonText,
+  getConferenceRegUrl,
+  getConferenceRegText,
+  showConferenceRegButton,
+} = useConferenceHelpers();
+
+const {
+  isLoggedIn,
+  loginModalVisible,
+  conferenceToLoginTo,
+  goEventPage,
+  setConferenceToLoginTo,
+  buttonClass,
+  getSponsors,
+  getBrand,
+  isHomePage,
+} = useEvents();
+
+const { classBinding } = useClassBinding();
+
+const showViewButton = (_conference: Conference): boolean => {
+  return isUpcoming.value
+    ? showConferenceViewButton(_conference)
+    : showViewArchiveButton(_conference);
+};
+
+const getVideoUrl = (_conference: Conference): string => {
+  return isUpcoming.value
+    ? getConferenceWebcastUrl(_conference)
+    : getViewArchiveUrl(_conference);
+};
+
+const getVideoButtonText = (_conference: Conference): string => {
+  return isUpcoming.value
+    ? getConferenceWebcastButtonText(_conference)
+    : getViewArchiveButtonText(_conference);
+};
+
+// computed
+const eventType = computed((): Conference[] => {
+  return isUpcoming.value ? upcomingEvents.value : pastEvents.value;
+});
+
+const showLoginButton = computed((): boolean => {
+  const archivedHomepage: boolean =
+    isUpcoming.value || (!isUpcoming.value && isHomePage.value);
+  return (
+    archivedHomepage &&
+    loginButton.value &&
+    !isLoggedIn.value &&
+    !globalConfigValue.value("townhall_registration_enabled")
+  );
+});
+</script>
+
+<template>
+  <!-- list container -->
+  <div class="flex w-full flex-col">
+    <!-- list container -->
+    <div
+      :class="
+        classBinding(classObject, 'listContainer', 'container flex-1 mx-auto')
+      "
+    >
+      <!-- individual event container -->
+      <div
+        v-for="conference in eventType"
+        :key="conference.id"
+        :class="[
+          {
+            'border-1 border-t border-color-accent-2':
+              borderPosition === Position.TOP,
+          },
+          classBinding(
+            classObject,
+            'eventContainer',
+            'flex flex-col items-center md:flex-row py-4'
+          ),
+        ]"
+      >
+        <!-- event image -->
+        <div
+          v-if="showEventImage"
+          :class="
+            classBinding(
+              classObject,
+              'eventImageContainer',
+              'flex w-full md:w-1/3 pb-3 px-3 md:px-6 overflow-hidden'
+            )
+          "
+        >
+          <img
+            :class="
+              classBinding(
+                classObject,
+                'eventImage',
+                'flex-1 self-center mx-auto w-full'
+              )
+            "
+            :src="conference.photo"
+          />
+        </div>
+        <!-- event details container -->
+        <div
+          :class="[
+            { 'md:w-2/3': showEventImage },
+            classBinding(
+              classObject,
+              'eventContentContainer',
+              'flex flex-col justify-center text-center w-full md:pr-6 md:text-left md:justify-start md:items-start'
+            ),
+          ]"
+        >
+          <!-- event brand, name, date and countdown container -->
+          <div
+            :class="[
+              {
+                'border-1 border-b border-color-accent-2 mb-6':
+                  borderPosition === Position.MIDDLE,
+              },
+              classBinding(
+                classObject,
+                'eventDetailsContainer',
+                'w-full flex flex-col lg:flex-row'
+              ),
+            ]"
+          >
+            <!-- event details -->
+            <div
+              :class="classBinding(classObject, 'eventDetails', 'flex-grow')"
+            >
+              <template v-if="showBrand && getBrand(conference.affiliates)">
+                <a
+                  :class="classBinding(classObject, 'eventBrandLink', '')"
+                  :href="getBrand(conference.affiliates).website"
+                  :target="(getBrand(conference.affiliates).website) ? '_blank' : null"
+                >
+                  <h3
+                    :class="
+                      classBinding(
+                        classObject,
+                        'eventBrand',
+                        'text-base font-bold leading-tight tracking-wide mb-3'
+                      )
+                    "
+                  >
+                    {{ getBrand(conference.affiliates).name }}
+                  </h3>
+                </a>
+              </template>
+              <nuxt-link
+                :to="
+                  eventPathPrefix
+                    ? eventPathPrefix + conference.id
+                    : `/${isUpcoming ? 'upcoming-events' : 'past-events'}/${
+                        conference.id
+                      }`
+                "
+                class="no-underline"
+              >
+                <h2
+                  :class="
+                    classBinding(
+                      classObject,
+                      'eventName',
+                      'text-2xl lg:text-3xl font-medium mb-2 conf-name-alignment'
+                    )
+                  "
+                >
+                  {{ conference.name }}
+                </h2>
+              </nuxt-link>
+              <p
+                :class="
+                  classBinding(
+                    classObject,
+                    'eventDate',
+                    'text-base leading-normal tracking-wide font-light uppercase md:text-md lg:text-lg'
+                  )
+                "
+              >
+                {{ formatDate(conference.start_date) }}
+                <span v-if="!isSingleDayEvent(conference)">
+                  - {{ formatDate(conference.end_date) }}</span
+                >
+              </p>
+            </div>
+            <!-- countdown timer - top-aligned -->
+            <div
+              v-if="
+                isUpcoming &&
+                showCountdown &&
+                countdownPosition === Position.TOP &&
+                pagesConfigValue('main.countdown_timer')
+              "
+              :class="
+                classBinding(
+                  classObject,
+                  'countdownContainerTop',
+                  'flex-auto flex items-center self-center mb-4 lg:mb-0'
+                )
+              "
+            >
+              <CommonCountdownTimer
+                :date="conference.start_date"
+                :is-compact="true"
+                :class-object="classObject.components.countdownTimer"
+              ></CommonCountdownTimer>
+            </div>
+          </div>
+          <!-- event button, countdown timer, and sponsors container -->
+          <div
+            :class="
+              classBinding(
+                classObject,
+                'buttonCountdownSponsorsContainer',
+                'flex flex-col w-full'
+              )
+            "
+          >
+            <div
+              :class="
+                classBinding(
+                  classObject,
+                  'buttonCountdownContainer',
+                  'flex-1 flex flex-col justify-between xl:flex-row w-full'
+                )
+              "
+            >
+              <div
+                :class="
+                  classBinding(
+                    classObject,
+                    'buttonContainer',
+                    'flex-auto mr-0 xl:mr-4'
+                  )
+                "
+              >
+                <!-- live event button - if enabled, hide all other buttons if event is live -->
+                <template
+                  v-if="liveButton && conference.state === ConferenceState.LIVE"
+                >
+                  <!-- go to video -->
+                  <a
+                    v-if="liveButtonOpensStream"
+                    :href="getVideoUrl(conference)"
+                    :target="
+                      /^http/.test(!isUpcoming && getVideoUrl(conference))
+                        ? '_blank'
+                        : '_self'
+                    "
+                  >
+                    <button
+                      :class="
+                        classBinding(classObject, 'liveButtonItem', buttonClass)
+                      "
+                    >
+                      {{ getVideoButtonText(conference) }}
+                    </button>
+                  </a>
+                  <!-- go to event page -->
+                  <button
+                    v-else
+                    :class="
+                      classBinding(classObject, 'liveButtonItem', buttonClass)
+                    "
+                    @click="goEventPage(conference, eventPathPrefix)"
+                  >
+                    {{ getVideoButtonText(conference) }}
+                  </button>
+                </template>
+
+                <template v-else>
+                  <!-- view info button -->
+                  <button
+                    v-if="viewInfoButton"
+                    :class="
+                      classBinding(classObject, 'buttonItem', buttonClass)
+                    "
+                    @click="goEventPage(conference, eventPathPrefix)"
+                  >
+                    More Info
+                  </button>
+                  <!-- view live/preview archive button -->
+                  <a
+                    v-if="mediaButton && showViewButton(conference)"
+                    :href="getVideoUrl(conference)"
+                    :target="
+                      /^http/.test(!isUpcoming && getVideoUrl(conference))
+                        ? '_blank'
+                        : '_self'
+                    "
+                  >
+                    <button
+                      :class="
+                        classBinding(classObject, 'buttonItem', buttonClass)
+                      "
+                    >
+                      {{ getVideoButtonText(conference) }}
+                    </button>
+                  </a>
+
+                  <!-- login button -->
+                  <button
+                    v-if="showLoginButton"
+                    :class="
+                      classBinding(classObject, 'buttonItem', buttonClass)
+                    "
+                    @click="setConferenceToLoginTo(conference)"
+                  >
+                    Log In
+                  </button>
+
+                  <!-- register button -->
+                  <a
+                    v-if="registerButton && showConferenceRegButton(conference)"
+                    :href="getConferenceRegUrl(conference, registerPathPrefix)"
+                    :target="
+                      /^http/.test(getConferenceRegUrl(conference))
+                        ? '_blank'
+                        : '_self'
+                    "
+                  >
+                    <button
+                      :class="
+                        classBinding(classObject, 'buttonItem', buttonClass)
+                      "
+                    >
+                      {{ getConferenceRegText(conference) }}
+                    </button>
+                  </a>
+                </template>
+              </div>
+              <!-- countdown timer - right-aligned -->
+              <div
+                v-if="
+                  isUpcoming &&
+                  showCountdown &&
+                  countdownPosition === Position.RIGHT &&
+                  pagesConfigValue('main.countdown_timer')
+                "
+                class="flex-auto md:flex mt-3 md:mt-2"
+                :class="
+                  classBinding(
+                    classObject,
+                    'countdownContainerRight',
+                    'flex-auto flex items-center self-center mb-4 lg:mb-0'
+                  )
+                "
+              >
+                <CommonCountdownTimer
+                  :date="conference.start_date"
+                  :is-compact="true"
+                  :class-object="classObject.components.countdownTimer"
+                ></CommonCountdownTimer>
+              </div>
+            </div>
+            <!-- countdown timer - bottom-aligned -->
+            <div
+              v-if="
+                isUpcoming &&
+                showCountdown &&
+                countdownPosition === Position.BOTTOM &&
+                pagesConfigValue('main.countdown_timer')
+              "
+              :class="
+                classBinding(
+                  classObject,
+                  'countdownContainerBottom',
+                  'flex-auto md:flex my-3 md:my-2'
+                )
+              "
+            >
+              <CommonCountdownTimer
+                :date="conference.start_date"
+                :is-compact="true"
+                :class-object="classObject.components.countdownTimer"
+              ></CommonCountdownTimer>
+            </div>
+            <!-- sponsors container - bottom-aligned -->
+            <div
+              v-if="showSponsors && sponsorPosition === Position.BOTTOM"
+              class=""
+              :class="
+                classBinding(
+                  classObject,
+                  'sponsorsContainer',
+                  'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-y-1.5 gap-x-3'
+                )
+              "
+            >
+              <!-- individual sponsor -->
+              <template
+                v-for="(affiliate, index) in getSponsors(conference.affiliates)"
+                :key="index"
+              >
+                <h3
+                  v-if="index === 0"
+                  :class="
+                    classBinding(classObject, 'sponsoredByText', 'hidden')
+                  "
+                >
+                  Sponsored by:
+                </h3>
+                <CommonSponsor
+                  v-if="affiliate.photo"
+                  :sponsor="affiliate"
+                  :class-object="classObject.components.sponsor"
+                ></CommonSponsor>
+              </template>
+            </div>
+          </div>
+        </div>
+        <!-- sponsors container - right-aligned -->
+        <div
+          v-if="showSponsors && sponsorPosition === Position.RIGHT"
+          class="flex flex-col"
+        >
+          <!-- individual sponsor -->
+          <template
+            v-for="(affiliate, index) in getSponsors(conference.affiliates)"
+            :key="index"
+          >
+            <h3
+              v-if="index === 0"
+              :class="classBinding(classObject, 'sponsoredByText', 'hidden')"
+            >
+              Sponsored by:
+            </h3>
+            <CommonSponsor
+              v-if="affiliate.photo"
+              :sponsor="affiliate"
+              :class-object="classObject.components.sponsor"
+            ></CommonSponsor>
+          </template>
+        </div>
+      </div>
+    </div>
+    <!-- login modal -->
+    <CommonModal
+      :visible="loginModalVisible"
+      :class="classObject.components.modal"
+      @trigger="loginModalVisible = false"
+    >
+      <template #modal-body>
+        <CommonLoginFullWidth
+          :conference="conferenceToLoginTo"
+          :class="classObject.components.login"
+        />
+      </template>
+    </CommonModal>
+  </div>
+</template>
+
 <style scoped>
 .leading-tight {
   line-height: 1.25rem;
@@ -572,4 +559,4 @@ const showLoginButton = computed((): boolean => {
 .mr-4 {
   margin-right: 1rem;
 }
-</style>
+</style>