@saooti/octopus-sdk 41.0.7-SNAPSHOT → 41.0.7

package/src/components/misc/UserButtonContent.vue

@@ -0,0 +1,159 @@
+<template>
+  <nav :aria-label="navLabel">
+    <ul class="p-0 m-0">
+      <template v-if="specificRoutes.length">
+        <li v-for="routerBack in specificRoutes" :key="routerBack.path" class="li-style-none">
+          <router-link
+            v-if="!state.generalParameters.podcastmaker && routerBack.condition"
+            :class="routerBack.class"
+            :to="routerBack.path"
+          >
+            {{ routerBack.title }}
+          </router-link>
+        </li>
+        <hr v-if="displayUserContent"/>
+      </template>
+      <template v-if="displayUserContent">
+        <template v-if="!isAuthenticated">
+          <li class="li-style-none">
+            <a class="octopus-dropdown-item realLink" :href="pathLogin">
+              {{ t("Login") }}
+            </a>
+          </li>
+          <li class="li-style-none">
+            <router-link
+              v-if="!state.generalParameters.podcastmaker"
+              class="octopus-dropdown-item"
+              to="/main/pub/create"
+            >
+              {{ t("Create an account") }}
+            </router-link>
+          </li>
+        </template>
+        <template v-else>
+          <li v-for="routeBackoffice in routerBackoffice" :key="routeBackoffice.path" class="li-style-none">
+            <router-link
+              v-if="!state.generalParameters.podcastmaker && routeBackoffice.condition"
+              :class="routeBackoffice.class"
+              :to="routeBackoffice.path"
+            >
+              {{ routeBackoffice.title }}
+            </router-link>
+          </li>
+          <hr />
+          <template v-if="helpLinks.length">
+            <li v-for="helpLink in helpLinks" :key="helpLink.title" class="li-style-none">
+              <a
+                :href="helpLink.href"
+                class="octopus-dropdown-item realLink"
+                rel="noreferrer noopener"
+                target="_blank"
+                :title="t('New window', {text: helpLink.title})"
+              >
+                {{ helpLink.title }}
+                <OpenInNewIcon class="ms-1" :size="15"/>
+              </a>
+            </li>
+            <hr />
+          </template>
+          <li class="li-style-none">
+            <a class="octopus-dropdown-item c-hand" href="/logout">
+              {{ t("Logout") }}
+            </a>
+          </li>
+        </template>
+        <li class="li-style-none">
+          <router-link
+            v-if="!authStore.isGarRole"
+            class="octopus-dropdown-item"
+            to="/main/pub/contact"
+          >
+            {{ t("Contact") }}
+          </router-link>
+        </li>
+      </template>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import OpenInNewIcon from "vue-material-design-icons/OpenInNew.vue";
+import { state } from "../../stores/ParamSdkStore";
+import { useAuthStore } from "../../stores/AuthStore";
+import { computed } from "vue";
+import { useApiStore } from "../../stores/ApiStore";
+import { useI18n } from "vue-i18n";
+import { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric, useRoute } from "vue-router";
+
+//Interface
+interface RouteInfo{
+  title: string;
+  class: string;
+  path: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
+  condition: boolean
+}
+
+//Props 
+const props = defineProps({
+  isEducation: { default: false, type: Boolean },
+  navLabel: { default: "", type: String },
+  specificRoutes: { default: ()=>[], type: Array as ()=> Array<RouteInfo> },
+  displayUserContent: { default: true, type: Boolean },
+})
+
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+const apiStore = useApiStore();
+const route = useRoute();
+
+//Computed
+const isAuthenticated = computed(() => undefined !== authStore.authProfile?.userId);
+const pathLogin = computed(() => "/sso/login?redirect_url="+encodeURI(apiStore.frontendUrl + route.fullPath));
+const isAuthenticatedWithOrga = computed(() => undefined !== authStore.authOrgaId);
+const organisationsAvailable = computed(() =>  authStore.authProfile?.organisations ?? []);
+
+const helpLinks = computed(() => {
+  if (authStore.isGarRole || props.isEducation) {
+    return [];
+  }
+  return [
+    { title:t("Help"), href: "https://help.octopus.saooti.com/Aide/"},
+    { title: t("TutoMag"), href: "https://help.octopus.saooti.com/" },
+  ];
+});
+const routerBackoffice = computed(() => {
+  if(!isAuthenticated.value){
+    return [];
+  }
+  return [
+    {
+      title: t("My space"),
+      class: "octopus-dropdown-item show-small-screen",
+      path: "/main/priv/backoffice",
+      condition: isAuthenticatedWithOrga.value,
+    },
+    {
+      title: t("Upload"),
+      class: "octopus-dropdown-item show-small-screen",
+      path: "/main/priv/upload",
+      condition: isAuthenticatedWithOrga.value && authStore.isRoleContribution,
+    },
+    {
+      title: t("Edit my profile"),
+      class: "octopus-dropdown-item",
+      path: "/main/priv/edit/profile",
+      condition: true,
+    },
+    {
+      title: t("Edit my organisation"),
+      class: "octopus-dropdown-item",
+      path: "/main/priv/edit/organisation",
+      condition:
+      isAuthenticatedWithOrga.value &&
+        (authStore.isRoleOrganisation || 1 < organisationsAvailable.value.length),
+    },
+  ];
+});
+
+</script>

package/src/components/misc/player/elements/PlayerImage.vue

@@ -22,7 +22,6 @@
         :height="imageWidth"
         aria-hidden="true"
         alt=""
-        
         :title="t('Episode name image', { name: podcastDisplay?.title })"
         class="player-image"
         :class="imageWidth > 50 ? 'big-player-image' : ''"

package/src/components/misc/player/video/PlayerVideo.vue

@@ -39,10 +39,10 @@ const playerStore = usePlayerStore();
 //Computed
 const isSecured = computed(() => "SECURED" === playerStore.playerLive?.organisation?.privacy);
 const hlsVideoUrl = computed(() => {
-  if (!playerStore.playerLive) {
+  if (!playerStore.playerHlsIdentifier) {
     return "";
   }
-  return `${apiStore.hlsUrl}live/video_dev.${playerStore.playerLive.conferenceId}/index.m3u8`;
+  return `${apiStore.hlsUrl}live/video_${playerStore.playerHlsIdentifier}/index.m3u8`;
 });
 
 onMounted(()=>{

package/src/components/pages/EmissionPage.vue

@@ -70,12 +70,17 @@
             :emission-id="emissionId"
           />
           <PodcastFilterList
+            v-if="isInit"
+            v-model:query="searchPattern"
             class="mx-2"
+            :first="paginateFirst"
+            :size="ps"
             :show-count="true"
             :emission-id="emissionId"
             :category-filter="false"
             :edit-right="editRight"
             :productor-id="[emission.orga.id]"
+            :force-update-parameters="true"
             @fetch="podcastsFetched"
           />
         </section>
@@ -110,6 +115,7 @@ import { useFilterStore } from "../../stores/FilterStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/ShareAnonymous.vue"));
 const PodcastFilterList = defineAsyncComponent(
   () => import("../display/podcasts/PodcastFilterList.vue"),
@@ -143,6 +149,9 @@ const PodcastmakerHeader = defineAsyncComponent(
 //Props 
 const props = defineProps({
   emissionId: { default: undefined, type: Number },
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeQuery: { default: "", type: String },
 })
 
 
@@ -163,6 +172,11 @@ const authStore = useAuthStore();
 const filterStore = useFilterStore();
 const generalStore= useGeneralStore();
 const route= useRoute();
+const {
+  searchPattern,
+  paginateFirst,
+  isInit
+} = useSimplePageParam(props, true);
 
 
 //Computed

package/src/components/pages/PageLogout.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="page-box page-box-absolute page-logout"
+    class="page-box page-box-absolute page-logout bg-gradient"
   >
     <div class="logout-section">
       <h1 class="mb-3">{{ t("Logout") }}</h1>
@@ -19,11 +19,6 @@ const { t } = useI18n();
 </script>
 <style lang="scss">
 .octopus-app .page-logout {
-  background: linear-gradient(
-    90deg,
-    var(--octopus-primary) 0%,
-    var(--octopus-tertiary) 100%
-  );
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/pages/ParticipantPage.vue

@@ -47,12 +47,17 @@
       </section>
       <!-- productorId define to avoid overwrite #12817 -->
       <PodcastFilterList
+        v-if="isInit"
+        v-model:query="searchPattern"
+        :first="paginateFirst"
+        :size="ps"
         :participant-id="participantId"
         :name="name"
         :category-filter="true"
         :productor-id="['']"
         :reload="reload"
         :show-count="true"
+        :force-update-parameters="true"
       />
     </template>
     <ClassicLoading
@@ -77,6 +82,7 @@ import { computed, defineAsyncComponent, ref, Ref, watch } from "vue";
 import { AxiosError } from "axios";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 const ShareSocialsButtons = defineAsyncComponent(
   () => import("../display/sharing/ShareSocialsButtons.vue"),
 );
@@ -92,6 +98,9 @@ const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/Sha
 //Props
 const props = defineProps({
   participantId: { default: undefined, type: Number },
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeQuery: { default: "", type: String },
 });
 
 
@@ -110,6 +119,11 @@ const {  isEditRights } = useOrgaComputed();
 const { updatePathParams } = useSeoTitleUrl();
 const {handle403} = useErrorHandler();
 const filterStore = useFilterStore();
+const {
+  searchPattern,
+  paginateFirst,
+  isInit
+} = useSimplePageParam(props, true);
 
 
 //Computed

package/src/components/pages/PlaylistPage.vue

@@ -18,8 +18,7 @@
               width="250"
               height="250"
               aria-hidden="true"
-        alt=""
-              
+              alt=""
               :title="t('Playlist name image', { name: name })"
               class="img-box float-start me-3 mb-3"
             />
@@ -42,7 +41,13 @@
           :organisation-id="playlist.organisation.id"
         />
         <section class="module-box">
-          <PodcastList :playlist="playlist" />
+          <PodcastList 
+            v-if="isInit"
+            v-model:query="searchPattern"
+            :first="paginateFirst"
+            :size="ps"
+            :playlist="playlist"
+          />
         </section>
       </div>
     </template>
@@ -71,6 +76,7 @@ import {defineAsyncComponent, ref, Ref, computed, watch, onBeforeUnmount } from
 import { AxiosError } from "axios";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 const ShareSocialsButtons = defineAsyncComponent(
   () => import("../display/sharing/ShareSocialsButtons.vue"),
 );
@@ -89,6 +95,9 @@ const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/Sha
 //Props
 const props = defineProps({
   playlistId: { default: undefined, type: Number },
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeQuery: { default: "", type: String },
 });
 
 
@@ -108,7 +117,11 @@ const {handle403} = useErrorHandler();
 const authStore = useAuthStore();
 const filterStore = useFilterStore();
 const generalStore = useGeneralStore();
-
+const {
+  searchPattern,
+  paginateFirst,
+  isInit
+} = useSimplePageParam(props, true);
 
 
 //Computed

package/src/components/pages/PodcastPage.vue

@@ -255,7 +255,7 @@ async function fetchConferenceStatus() {
       api: 9,
       path: "conference/info/" + podcast.value?.conferenceId,
     });
-    fetchConference.value.status = data.status;
+    fetchConference.value = {...fetchConference.value, ...data};
   } catch {
     //Do nothing
   }

package/src/components/pages/VideoPage.vue

@@ -193,7 +193,7 @@ const hlsVideoUrl = computed(() => {
   if (!recordingLive.value || !podcastConference.value) {
     return "";
   }
-  return `${apiStore.hlsUrl}live/video_dev.${podcastConference.value.conferenceId}/index.m3u8`;
+  return `${apiStore.hlsUrl}live/video_${podcastConference.value.hlsIdentifier}/index.m3u8`;
 });
 const isSecured = computed(() => {
   return "SECURED" === podcast.value?.organisation?.privacy;
@@ -255,7 +255,10 @@ async function getPodcastDetails(): Promise<void> {
         playerStore.playerPlay(
           {
             ...podcast.value,
-            ...{ conferenceId: podcast.value.conferenceId },
+            ...{ 
+              conferenceId: podcast.value.conferenceId,
+              hlsIdentifier: podcastConference.value?.hlsIdentifier,
+            },
           },
           true,
         );

package/src/helper/loadScript.ts

@@ -1,4 +1,4 @@
-function loadScript(src: string, async:boolean, callback: any) {
+function loadScript(src: string, async:boolean, callback: (isLoaded:boolean) => void) {
   const firstElement = document.getElementsByTagName('head')[0] || document.documentElement,
   scriptElement = document.createElement('script');
   scriptElement.type = 'text/javascript';
@@ -6,13 +6,13 @@ function loadScript(src: string, async:boolean, callback: any) {
   scriptElement.async = async;
   scriptElement.addEventListener('load', function() {
     if(callback && typeof callback === 'function') {
-      callback(true, window);
+      callback(true);
     }
   }, false);
-  scriptElement.addEventListener('error', function(error) {
+  scriptElement.addEventListener('error', function() {
     firstElement.removeChild(scriptElement);
     if(callback && typeof callback === 'function') {
-      callback(false, error);
+      callback(false);
     }
   }, false);
   firstElement.insertBefore(scriptElement, firstElement.firstChild);

package/src/locale/de.ts

@@ -146,8 +146,8 @@ export default {
   "Sort score": "Nach Relevanz",
   "Sort name": "Nach Titel",
   "Sort last": "Nach Datum",
-  "Choose color": "Farbe wählen",
-  "Choose theme": "Design wählen",
+  "Choose color": "Akzentfarbe",
+  "Choose theme": "Thema (Spielerhintergrund)",
   "Podcast no visible": "Podcast nicht sichtbar",
   "Display episodes": "Folgen anzeigen",
   "Podcast published in future": "Podcast geplant",

package/src/locale/en.ts

@@ -145,8 +145,8 @@ export default {
   "Sort score": "Sorted by relevancy score",
   "Sort name": "Sorted title",
   "Sort last": "Sorted last",
-  "Choose color": "Choose color",
-  "Choose theme": "Choose theme",
+  "Choose color": "Accent color",
+  "Choose theme": "Theme (player background)",
   "Podcast no visible": "Podcast not visible",
   "Display episodes": "Display episodes",
   "Podcast published in future": "Podcast published in the future",

package/src/locale/es.ts

@@ -145,8 +145,8 @@ export default {
   "Sort score": "Clasificación por pertinencia",
   "Sort name": "Clasificación por título",
   "Sort last": "Clasificación por fecha más reciente",
-  "Choose color": "Elegir color",
-  "Choose theme": "Elegir tema",
+  "Choose color": "Color de acento",
+  "Choose theme": "Tema (fondo del jugador)",
   "Podcast no visible": "Este pódcast no puede visualizarse",
   "Display episodes": "Mostrar episodios",
   "Podcast published in future": "Pódcast pendiente de publicación",

package/src/locale/fr.ts

@@ -146,8 +146,8 @@ export default {
   "Sort score": "Pertinence",
   "Sort name": "Alphabétique",
   "Sort last": "Antéchronologique",
-  "Choose color": "Couleur",
-  "Choose theme": "Thème",
+  "Choose color": "Couleur d'accent",
+  "Choose theme": "Thème (fond du player)",
   "Podcast no visible": "Épisode non visible actuellement",
   "Display episodes": "Affichage des épisodes",
   "Podcast publish in future": "Épisode publié dans le futur",

package/src/locale/it.ts

@@ -141,8 +141,8 @@ export default{
     'Sort score': 'Suddiviso per grado di rilevanza',
     'Sort name': 'Suddividi titolo',
     'Sort last': 'Suddividi ultimo',
-    'Choose color': 'Seleziona colore',
-    'Choose theme': 'Seleziona tema',
+    'Choose color': 'Colore accento',
+    'Choose theme': 'Tema (sfondo del giocatore)',
     'Podcast no visible': 'Podcast non visibile',
     'Display episodes': 'Mostra episodi',
     'Podcast published in future': 'Podcast pubblicato in futuro',

package/src/locale/sl.ts

@@ -142,8 +142,8 @@ export default {
   "Sort score": "Razvrščeno po relevantnosti",
   "Sort name": "Naslov",
   "Sort last": "Zadnje",
-  "Choose color": "Izberi barvo",
-  "Choose theme": "Izberi temo",
+  "Choose color": "Poudarjena barva",
+  "Choose theme": "Tema (ozadje igralca)",
   "Podcast no visible": "Podkast je skrit",
   "Display episodes": "Prikaži epizode",
   "Podcast published in future": "Podkast bo objavljen v prihodnje",

package/src/router/router.ts

@@ -144,9 +144,13 @@ const routes: Array<RouteRecordRaw> = [
     component: EmissionPage,
     props: (route: RouteLocationNormalized) => ({
       emissionId: parseInt(route.params.emissionId.toString(), 10),
+      pr: route.query.pr ? parseInt(route.query.pr.toString(), 10) : undefined,
+      ps: route.query.ps ? parseInt(route.query.ps.toString(), 10) : undefined,
+      routeQuery: route.query.q ?? "",
     }),
     meta:{
-      title: ""
+      title: "",
+      noScroll:true
     }
   },
   {
@@ -177,9 +181,13 @@ const routes: Array<RouteRecordRaw> = [
     component: ParticipantPage,
     props: (route: RouteLocationNormalized) => ({
       participantId: parseInt(route.params.participantId.toString(), 10),
+      pr: route.query.pr ? parseInt(route.query.pr.toString(), 10) : undefined,
+      ps: route.query.ps ? parseInt(route.query.ps.toString(), 10) : undefined,
+      routeQuery: route.query.q ?? "",
     }),
     meta:{
-      title: ""
+      title: "",
+      noScroll:true
     }
   },
   {
@@ -266,9 +274,13 @@ const routes: Array<RouteRecordRaw> = [
     component: PlaylistPage,
     props: (route: RouteLocationNormalized) => ({
       playlistId: parseInt(route.params.playlistId.toString(), 10),
+      pr: route.query.pr ? parseInt(route.query.pr.toString(), 10) : undefined,
+      ps: route.query.ps ? parseInt(route.query.ps.toString(), 10) : undefined,
+      routeQuery: route.query.q ?? "",
     }),
     meta:{
-      title: ""
+      title: "",
+      noScroll:true
     }
   },
   //Fake route to avoid errors
@@ -321,7 +333,8 @@ const routes: Array<RouteRecordRaw> = [
 const router = createRouter({
   history: createWebHistory(),
   routes: routes,
-  scrollBehavior(): { left: number; top: number } {
+  scrollBehavior(to, from) {
+    if (to.name === from.name && to.meta.noScroll) return false;
     return { left: 0, top: 0 };
   },
 });

package/src/stores/AuthStore.ts

@@ -5,19 +5,19 @@ import { defineStore } from "pinia";
 import { KeycloakInfo } from "@/stores/class/user/person";
 import { VideoConfig } from "@/stores/class/config/videoConfig";
 import classicApi from "../api/classicApi";
-
+interface AuthParam{
+  accessToken?: string;
+  refreshToken?: string;
+  expiration?: Date|string;
+  clientId?: string;
+}
 interface AuthState {
   authReload: number;
   authName: string;
   authOrgaId?: string;
   authOrgaName?: string;
   authRole: Array<string>;
-  authParam: {
-    accessToken?: string;
-    refreshToken?: string;
-    expiration?: Date;
-    clientId?: string;
-  };
+  authParam:AuthParam;
   authProfile?: Profile;
   authOrganisation: Organisation;
   authVideoConfig: VideoConfig;
@@ -115,25 +115,25 @@ export const useAuthStore = defineStore("AuthStore", {
     },
   },
   actions: {
-    authUpdate(authentication: any) {
+    authUpdate(authentication: {name?:string, organisationId?:string,organisationName?:string, role?:Array<string>}) {
       this.authName = authentication.name ?? this.authName;
       this.authOrgaId = authentication.organisationId ?? this.authOrgaId;
       this.authOrgaName = authentication.organisationName ?? this.authOrgaName;
       this.authRole = authentication.role ?? this.authRole;
     },
-    authUpdateParam(oAuthParam: any) {
+    authUpdateParam(oAuthParam: AuthParam) {
       this.authParam = oAuthParam;
     },
-    authUpdateProfile(profile: any) {
+    authUpdateProfile(profile: Profile) {
       this.authProfile = profile;
       this.authName = profile.firstname + " " + profile.lastname;
     },
-    authUpdateOrganisation(organisation: any) {
+    authUpdateOrganisation(organisation: Organisation) {
       this.authOrganisation = organisation;
       const saveFetchStore = useSaveFetchStore();
       saveFetchStore.forceUpdateAttributes(
         organisation.id,
-        organisation.attributes,
+        organisation.attributes??{}
       );
       saveFetchStore.forceUpdateData(organisation.id, organisation);
     },

package/src/stores/FilterStore.ts

@@ -52,7 +52,7 @@ export const useFilterStore = defineStore("FilterStore", {
       this.filterRubrique = rubriqueFilter;
     },
     filterUpdateRubriqueDisplay(rubriques: Array<Rubrique>) {
-      this.filterRubriqueDisplay = rubriques;
+      this.filterRubriqueDisplay = rubriques.filter(rubrique=> rubrique);
     },
     filterUpdateMedia(filter: {
       type?: string;

package/src/stores/PlayerStore.ts

@@ -32,6 +32,7 @@ interface PlayerState {
   playerChaptering?: Chaptering;
   playerDelayStitching: number;
   playerHlsUrl?: string;
+  playerHlsIdentifier?:string;
 }
 export const usePlayerStore = defineStore("PlayerStore", {
   state: (): PlayerState => ({
@@ -49,6 +50,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerVideo: false,
     playerChaptering: undefined,
     playerDelayStitching: 0,
+    playerHlsIdentifier: undefined,
   }),
   getters: {
     playerChapteringPercent(): ChapteringPercent | undefined {
@@ -146,6 +148,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         this.playerPodcast = undefined;
         this.playerMedia = undefined;
         this.playerLive = undefined;
+        this.playerHlsIdentifier = undefined;
         this.playerRadio = undefined;
         this.playerElapsed = 0;
         this.playerVideo = false;
@@ -168,6 +171,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
       this.playerPodcast = undefined;
       this.playerMedia = undefined;
       this.playerLive = undefined;
+      this.playerHlsIdentifier = undefined;
       this.playerRadio = undefined;
       this.playerVideo = isVideo;
       this.playerElapsed = 0;
@@ -177,6 +181,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         (!param.podcastId || param.processingStatus !== "READY")
       ) {
         this.playerLive = param;
+        this.playerHlsIdentifier = param.hlsIdentifier;
         this.playerCurrentChange = null;
         return;
       }

package/src/stores/VastStore.ts

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { AdPosition } from "./class/adserver/adPosition";
 
 interface VastState {
-  currentAd: any;
+  currentAd: google.ima.Ad|undefined;
   isAdPlaying: boolean;
   isAdPaused: boolean;
   isAdSkippable: boolean;
@@ -79,7 +79,7 @@ export const useVastStore = defineStore("VastStore", {
     ) {
       this.adPositionsPodcasts[podcastId] = adPositions;
     },
-    updateCurrentAd(currentAd: any) {
+    updateCurrentAd(currentAd: google.ima.Ad) {
       this.currentAd = currentAd;
       this.isAdSkipped = false;
     },