@icvdeveloper/common-module 0.0.74 → 0.0.76

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "v3plus-common-module",
   "configKey": "v3plusCommonModule",
-  "version": "0.0.74"
+  "version": "0.0.76"
 }

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

@@ -8,6 +8,7 @@ import { useDateFormat } from "../../composables/useDateFormat";
 import { usePresenter } from "../../composables/usePresenter";
 import { Presenter } from "../../models/conference";
 import AgendaAccordion from "./components/AgendaListAccordion.vue";
+import Calendar from "./components/Calendar.vue";
 
 type Props = {
   conference: Conference;
@@ -77,6 +78,13 @@ const presentersToComposables = (presenters: Presenter[]) => {
                 <span class="text-lg hidden md:block md:flex-initial time-width md:mr-8" />
 
                 <div class="flex-1 my-3">
+                  <!-- ADD TO CALENDAR -->
+                  <calendar
+                    :key="conference.id"
+                    class="mb-3"
+                    :presentation="presentation"
+                    :conference="conference"
+                  />
                   <h3 class="font-bold text-lg">Presenters</h3>
                   <div class="flex flex-col space-y-3">
                     <div

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

@@ -9,6 +9,7 @@ import { usePresenters } from "../../composables/usePresenters";
 import CommonAccordion from "../layouts/Accordion.vue";
 import Sponsor from "./components/Sponsor.vue";
 import PresentationLink from "./components/PresentationLink.vue";
+import Calendar from "./components/Calendar.vue";
 
 type Props = {
   conference: Conference;
@@ -246,6 +247,14 @@ const presentersContainer = computed(() => {
                         ></presentation-link>
                       </div>
 
+                      <!-- ADD TO CALENDAR -->
+                      <calendar
+                        :key="conference.id"
+                        class="mb-3"
+                        :presentation="presentation"
+                        :conference="conference"
+                      />
+
                       <!-- PRESENTERS LIST (ACCORDION OR STANDARD/DIV) -->
                       <component
                         :is="presentersContainer"

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

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { ref, toRefs, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { get } from "lodash-es";
+import { DateTime } from 'luxon';
+import { useTemplateConfigsStore } from "../../../store";
+import 'add-to-calendar-button';
+import { Conference } from "../../../models/conference";
+import { Presentation } from "../../../models/conference";
+
+type Props = {
+  conference: Conference;
+  presentation: Presentation;
+};
+
+const props = defineProps<Props>();
+
+const { conference, presentation } = toRefs(props);
+
+const { pagesConfigValue } = storeToRefs(useTemplateConfigsStore());
+
+// Computed
+const showAddToGoogleCalendar = computed((): boolean => {
+    return pagesConfigValue.value("agenda.add_to_google_calendar", false);
+});
+  
+const showAddToMicrosoftCalendar = computed((): boolean => {
+  return pagesConfigValue.value("agenda.add_to_microsoft_calendar", false);
+});
+
+const presStartDate = computed((): string => {
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).toFormat("yyyy-MM-dd");
+});
+
+const presStartTime = computed((): string => {
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).toFormat("HH:mm");
+});
+
+const presEndTime = computed((): string => {
+  let duration: number = get(presentation.value, "duration", 3600) // default to 60 min
+  return DateTime.fromSQL(
+      presentation.value.date,
+      { zone: conference.timezone }
+    ).plus(duration * 1000).toFormat("HH:mm");
+});
+
+const calendarOptions = computed((): string => {
+  let opts = [];
+  if (showAddToGoogleCalendar) { opts.push('Google'); }
+  if (showAddToMicrosoftCalendar) { opts.push('iCal'); }
+  let optsQuoted = opts.map(opt => `'${opt}'`);
+  return optsQuoted.join(',');
+});
+
+const cssPath = computed((): string => {
+  // atcb.css required in template/playground public folder
+  return window.location.origin + "/atcb.css";
+});
+
+</script>
+
+<template>
+  <div>
+    <add-to-calendar-button 
+      :name="presentation.name"
+      :description="presentation.description"
+      :startDate="presStartDate"
+      :startTime="presStartTime"
+      :endTime="presEndTime"
+      :timeZone="conference.timezone"
+      :location="conference.location"
+      listStyle="dropdown"
+      trigger="click"
+      lightMode="bodyScheme"
+      buttonStyle="custom"
+      :customCss="cssPath"
+      hideIconButton
+      hideBackground
+      hideCheckmark
+      :options="calendarOptions"
+    ></add-to-calendar-button>
+  </div>
+</template>

package/dist/runtime/components/support/FAQAccordion.vue

@@ -9,6 +9,7 @@ import { useClassBinding } from "../../composables/useClassBinding";
 
 interface Props {
   streamTestEnabled?: boolean;
+  showSupport?: boolean;
   showForm?: boolean;
   liveSupportUrl?: string;
   questionArray?: Array<{ q: string; a: string }>;
@@ -17,12 +18,13 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   streamTestEnabled: false,
+  showSupport: true,
   showForm: true,
   liveSupportUrl: "",
   questionArray: () => [
     {
       q: "<span class='font-bold'>Q: Have you run the pre-event streaming test?</span>",
-      a: "<p>The most important step is to visit our <a href='/stream-test'>Pre-Event Test Stream</a> using the computer or device you will use for the live web event, and connecting with the same network connection you will use for the live web event. We begin webcasting a pre-event test stream one week prior to the event.</p><p> If you can see video, hear the sound, and see the test slide, you will most likely be ready for the web event.</p>",
+      a: "<p>The most important step is to visit our <a href='/stream-test'>Pre-Event Test Stream</a> using the computer or device you will use for the live web event, and connecting with the same network connection you will use for the live web event. We begin webcasting a pre-event test stream one week prior to the event.</p><p> If you can see video, and hear the audio, you will most likely be ready for the web event.</p>",
     },
     {
       q: "<span class='font-bold'>Q: What are the browser requirements?</span>",
@@ -38,11 +40,11 @@ const props = withDefaults(defineProps<Props>(), {
     },
     {
       q: "<span class='font-bold'>Q: Why is my video completely black (or displaying an error)?</span>",
-      a: "<p>If your webcast does not start playing even after trying the abovefixes, the stream may have gone down due to technical issues at thelocation or out on the internet between the location of the event andyour computer. If this is the case, everyone else watching the streamwill be having the same issues as you. Send a message to tech supportusing the 'Support' link at the top of the player page. If you do notreceive a response within a few minutes, it is likely that the streamis down for everyone and that we are working on getting it back up.</,p>",
+      a: "<p>If your webcast does not start playing even after trying the above fixes, the stream may have gone down due to technical issues at thelocation or out on the internet between the location of the event and your computer. If this is the case, everyone else watching the streamwill be having the same issues as you. Send a message to tech supportusing the 'Support' link at the top of the player page. If you do not receive a response within a few minutes, it is likely that the stream is down for everyone and that we are working on getting it back up.</p>",
     },
     {
       q: "<span class='font-bold'>Q: Can I view the live stream on a mobile device?</span>",
-      a: "<p>You can view the webcast from a mobile device, such as a cell phone,iPad, or tablet. We recommend that you be somewhere where there isfast, reliable WiFi or a strong data connection in order to avoid anyinterruptions. There are many versions of mobile operating systems onthe market today. We strive to make video playable on all devices,however while we try to create a universally playable stream, someolder devices may not be compatible.</p><p>Also, mobile bandwidth can fluctuate extensively from location tolocation. Because this is a live streaming protocol, a consistentsustained data rate is required for the stream to play properly.Unlike video on YouTube and other services, that will progressivelydownload the video, live video is constant, and if bandwidthfluctuates below a minimum data rate, even for a couple of seconds,the stream could be interrupted.</p>",
+      a: "<p>You can view the webcast from a mobile device, such as a cell phone, iPad, or tablet. We recommend that you be somewhere where there is fast, reliable WiFi or a strong data connection in order to avoid any interruptions. There are many versions of mobile operating systems onthe market today. We strive to make video playable on all devices, however while we try to create a universally playable stream, some older devices may not be compatible.</p><p>Also, mobile bandwidth can fluctuate extensively from location tolocation. Because this is a live streaming protocol, a consistent sustained data rate is required for the stream to play properly. Unlike video on YouTube and other services, that will progressively download the video, live video is constant, and if bandwidth fluctuates below a minimum data rate, even for a couple of seconds, the stream could be interrupted.</p>",
     },
   ],
   classObject: () => {
@@ -103,6 +105,7 @@ const { classBinding } = useClassBinding();
       </CommonAccordion>
     </template>
     <CommonAccordion
+      v-if="showSupport"
       :class="classBinding(classObject.components?.accordion, 'container', '')"
       :class-object="classObject.components.accordion"
     >

package/dist/runtime/models/pagesConfig.d.ts

@@ -41,6 +41,8 @@ export type AgendaPlayerPageConfigs = {
     use_accordion: ToggleVariable;
     use_presenter_modal: ToggleVariable;
     sponsors: ToggleVariable;
+    add_to_google_calendar: ToggleVariable;
+    add_to_microsoft_calendar: ToggleVariable;
     group_tracks: SelectVariable;
     use_zoom_icon: ToggleVariable;
     use_play_icon: ToggleVariable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icvdeveloper/common-module",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -26,10 +26,12 @@
     "@nuxt/kit": "^3.0.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
     "@pinia/nuxt": "^0.3.1",
+    "add-to-calendar-button": "^2.1.1",
     "analytics": "^0.8.1",
     "date-fns": "^2.29.1",
     "date-fns-tz": "^1.3.6",
     "lodash-es": "^4.17.21",
+    "luxon": "^3.2.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.17",
     "pinia-plugin-persistedstate": "^2.1.1",