@saooti/octopus-sdk 37.0.15 → 37.0.17

package/index.html

@@ -16,5 +16,14 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  <!-- Test digiteka video -->
+  <script type="text/javascript">
+    var _ultimedia_host = (window.location.protocol == 'https:' ? 'https' : 'http') + "://www.ultimedia.com";
+    var _ultimedia_script = document.createElement("script");
+  
+    _ultimedia_script.setAttribute("type", "text/javascript");
+    _ultimedia_script.setAttribute("src", _ultimedia_host + '/js/common/visible_player.js');
+    document.getElementsByTagName('head')[0].appendChild(_ultimedia_script);
+  </script>
   <script type="module" src="./src/main.ts"></script>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.15",
+  "version": "37.0.17",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,6 +14,8 @@
     "test": "jest --coverage"
   },
   "dependencies": {
+    "@clappr/core": "0.4.27",
+    "@clappr/hlsjs-playback": "^1.1.0",
     "@popperjs/core": "^2.11.8",
     "@saooti/octopus-api": "^0.34.3",
     "@tiptap/extension-link": "^2.0.4",

package/src/assets/share.scss

@@ -64,8 +64,8 @@
   }
   .page-element{
     margin-top: 12rem;
-    z-index: 1;
-    /* position: relative; */
+    /* z-index: 1; */
+    position: relative;
   }
 
   .vue-swatches__trigger{

package/src/components/display/list/SwiperList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="position-relative">
+  <div class="position-relative w-100">
     <template v-if="!isPhone">
       <button class="btn-transparent swiper-button-prev" v-show="isLoop" @click="slidePrevButton()"></button>
       <swiper

package/src/components/display/podcasts/PodcastImage.vue

@@ -32,7 +32,7 @@
       v-if="hidePlay || recordingLive"
       class="image-play-button"
       :class="classicPodcastPlay ? '' : 'transparent-background'"
-      @click="play"
+      @click="play(false)"
     >
       <div v-if="!isLiveToBeRecorded" class="icon-container">
         <div v-if="!playingPodcast" :title="$t('Play')" class="saooti-play" />
@@ -61,6 +61,11 @@
         {{ textVisible }}
       </div>
     </button>
+    <button 
+      v-if="isVideoPodcast"
+      class="btn admin-button btn-play-video saooti-video"
+      @click="play(true)"
+    ></button>
     <div
       v-if="displayDescription && isMobile"
       class="background-icon bg-primary saooti-arrow-up"
@@ -102,7 +107,11 @@ export default defineComponent({
       "playerPodcast",
       "playerLive",
       "playerStatus",
+      "playerVideo"
     ]),
+    isVideoPodcast(): boolean{
+      return this.fetchConference?.videoProfile?.includes('video_') || undefined!==this.podcast.video?.videoId;
+    },
     playingPodcast() {
       return (
         this.playerPodcast?.podcastId === this.podcast.podcastId ||
@@ -248,21 +257,21 @@ export default defineComponent({
 
   methods: {
     ...mapActions(usePlayerStore, ["playerChangeStatus", "playerPlay"]),
-    play(): void {
+    play(isVideo: boolean): void {
       if (this.isLiveToBeRecorded) {
         return;
       }
-      if (this.playingPodcast) {
+      if (this.playingPodcast && isVideo===this.playerVideo) {
         this.playerChangeStatus("PLAYING" === this.playerStatus);
         return;
       }
       if (!this.recordingLive) {
-        this.playerPlay(this.podcast);
+        this.playerPlay(this.podcast, isVideo);
       } else {
         this.playerPlay({
           ...this.podcast,
           ...{ conferenceId: this.fetchConference?.conferenceId },
-        });
+        }, isVideo);
       }
       if (this.clickPlayGoPage) {
         this.$router.push("/main/pub/podcast/" + this.podcast.podcastId);
@@ -310,6 +319,15 @@ export default defineComponent({
     background-color: rgba(255, 255, 255, 0.5);
   }
 
+  .btn.btn-play-video{
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: 0.5rem;
+    background: $primaryColorLessTransparent !important;
+    color:white !important
+  }
+
   .image-play-button .play-button-error-icon {
     background: #0000009d !important;
     cursor: default !important;

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -17,7 +17,6 @@
           :playing-podcast="playingPodcast"
           :fetch-conference="fetchConference"
           :is-animator-live="isOctopusAndAnimator"
-          @play-podcast="playPodcast"
         />
         <div class="d-flex justify-content-between flex-wrap mb-2">
           <div v-if="0 !== date.length" :class="!isLiveReady ? 'me-5' : ''">
@@ -173,7 +172,7 @@ export default defineComponent({
     fetchConference: { default: undefined, type: Object as () => Conference },
   },
 
-  emits: ["playPodcast", "updatePodcast"],
+  emits: ["updatePodcast"],
 
   computed: {
     errorMessage(): string {
@@ -261,9 +260,6 @@ export default defineComponent({
     },
   },
   methods: {
-    playPodcast(podcast: Podcast): void {
-      this.$emit("playPodcast", podcast);
-    },
     removeDeleted(): void {
       if (window.history.length > 1) {
         this.$router.go(-1);

package/src/components/display/sharing/ShareButtons.vue

@@ -16,6 +16,8 @@
         target="popover-share-help"
         :title="$t('Help')"
         :content="$t('Share this page without edit and share blocks')"
+        relative-class="page-element"
+        :is-fixed="true"
       />
     </div>
     <ShareButtonsIntern

package/src/components/misc/player/PlayerComponent.vue

@@ -1,48 +1,52 @@
 <template>
   <div
     class="player-container"
+    :class="playerVideo? 'player-video':''"
     :style="{ height: playerHeight }"
     @transitionend="onHidden"
   >
     <template v-if="display">
-      <audio
-        id="audio-player"
-        :src="!playerLive && !playerRadio ? audioUrlToPlay : undefined"
-        autoplay
-        @timeupdate="onTimeUpdate"
-        @ended="onFinished"
-        @playing="onPlay"
-        @durationChange="onTimeUpdate"
-        @error="onError"
-        @seeked="onSeeked"
-        @pause="onPause"
-      />
-      <PlayerCompact
-        v-if="!playerLargeVersion"
-        v-model:notListenTime="notListenTime"
-        :player-error="playerError"
-        :comments="comments"
-        :display-alert-bar="displayAlertBar"
-        :percent-live-progress="percentLiveProgress"
-        :duration-live-position="durationLivePosition"
-        :listen-time="listenTime"
-        :hlsReady="hlsReady"
-        @stop-player="stopPlayer"
-        @change-player-large-version="playerUpdateLargeVersion(true)"
-      />
-      <PlayerLarge
-        v-else
-        v-model:notListenTime="notListenTime"
-        :player-error="playerError"
-        :comments="comments"
-        :display-alert-bar="displayAlertBar"
-        :percent-live-progress="percentLiveProgress"
-        :duration-live-position="durationLivePosition"
-        :listen-time="listenTime"
-        :hlsReady="hlsReady"
-        @stop-player="stopPlayer"
-        @change-player-large-version="playerUpdateLargeVersion(false)"
-      />
+      <PlayerVideo v-if="playerVideo"/>
+      <template v-else>
+        <audio
+          id="audio-player"
+          :src="!playerLive && !playerRadio ? audioUrlToPlay : undefined"
+          autoplay
+          @timeupdate="onTimeUpdate"
+          @ended="onFinished"
+          @playing="onPlay"
+          @durationChange="onTimeUpdate"
+          @error="onError"
+          @seeked="onSeeked"
+          @pause="onPause"
+        />
+        <PlayerCompact
+          v-if="!playerLargeVersion"
+          v-model:notListenTime="notListenTime"
+          :player-error="playerError"
+          :comments="comments"
+          :display-alert-bar="displayAlertBar"
+          :percent-live-progress="percentLiveProgress"
+          :duration-live-position="durationLivePosition"
+          :listen-time="listenTime"
+          :hlsReady="hlsReady"
+          @stop-player="stopPlayer"
+          @change-player-large-version="playerUpdateLargeVersion(true)"
+        />
+        <PlayerLarge
+          v-else
+          v-model:notListenTime="notListenTime"
+          :player-error="playerError"
+          :comments="comments"
+          :display-alert-bar="displayAlertBar"
+          :percent-live-progress="percentLiveProgress"
+          :duration-live-position="durationLivePosition"
+          :listen-time="listenTime"
+          :hlsReady="hlsReady"
+          @stop-player="stopPlayer"
+          @change-player-large-version="playerUpdateLargeVersion(false)"
+        />
+      </template>
     </template>
   </div>
 </template>
@@ -53,13 +57,17 @@ import PlayerCompact from "../player/PlayerCompact.vue";
 import PlayerLarge from "../player/PlayerLarge.vue";
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
-import { defineComponent } from "vue";
+import { defineComponent, defineAsyncComponent } from "vue";
+const PlayerVideo = defineAsyncComponent(
+  () => import("./PlayerVideo.vue"),
+);
 export default defineComponent({
   name: "PlayerComponent",
 
   components: {
     PlayerCompact,
     PlayerLarge,
+    PlayerVideo
   },
   mixins: [playerLogic],
   emits: ["hide"],
@@ -85,6 +93,7 @@ export default defineComponent({
       "playerStatus",
       "playerHeight",
       "playerLargeVersion",
+      "playerVideo"
     ]),
     display() {
       return "STOPPED" !== this.playerStatus;
@@ -120,7 +129,7 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app {
-  .player-container {
+  .player-container{
     max-height: 94%;
     position: sticky;
     overflow: hidden;

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

@@ -0,0 +1,91 @@
+<template>
+  <teleport to=".octopus-app">
+    <template v-if="playerVideo">
+      <button 
+        class="btn btn-transparent video-close saooti-remove"
+        @click="closePlayer"
+      />
+      <div class="video-wrapper">
+        <PlayerVideoDigiteka 
+          v-if="!playerLive"
+        />
+        <PlayerVideoHls
+          v-else
+          :hls-url="hlsUrl"
+        />
+      </div>
+    </template>
+  </teleport>
+</template>
+<script lang="ts">
+import { state } from "../../../stores/ParamSdkStore";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState, mapActions } from "pinia";
+import { defineComponent, defineAsyncComponent } from "vue";
+const PlayerVideoDigiteka = defineAsyncComponent(
+  () => import("./PlayerVideoDigiteka.vue"),
+);
+const PlayerVideoHls = defineAsyncComponent(
+  () => import("./PlayerVideoHls.vue"),
+);
+export default defineComponent({
+  name: "PlayerVideo",
+
+  components: {
+    PlayerVideoDigiteka,
+    PlayerVideoHls
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    ...mapState(usePlayerStore, ["playerVideo", "playerLive"]),
+    hlsUrl(): string{
+      if(!this.playerLive){return "";}
+      return `${state.podcastPage.hlsUri}live/video_dev.${this.playerLive.conferenceId}/index.m3u8`;
+      //return "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8";
+    }
+  },
+
+  methods: {
+    ...mapActions(usePlayerStore, ["playerPlay",]),
+    closePlayer(){
+      this.playerPlay();
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+.octopus-app {
+  .video-wrapper{
+    border-radius: 2rem;
+    overflow: hidden;
+    position: fixed;
+    bottom: 2.5rem;
+    right: 0;
+    z-index: 10;
+  }
+  .video-close{
+    position: fixed;
+    bottom: 16.5rem;
+    right: 1rem;
+  }
+  @media (max-width: 500px) {
+    .video-wrapper{
+      position:relative;
+      padding-bottom:56.25%;
+      height:0;
+    }
+    .video-wrapper iframe {
+      position:absolute;
+      top:0;
+      left:0;
+      width:100% !important;
+      height:100%;
+      margin:0 !important;
+    }
+  }
+}
+</style>

package/src/components/misc/player/PlayerVideoDigiteka.vue

@@ -0,0 +1,62 @@
+<template>
+  <iframe 
+    ref="iframeVideo"
+    :src="srcVideo"
+    width="500" 
+    height="281" 
+    style="z-index:1;" 
+    allowfullscreen="true" 
+    allow="autoplay" 
+    referrerpolicy="no-referrer-when-downgrade"
+  ></iframe>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "PlayerVideo",
+  components: {
+  },
+
+  computed:{
+    ...mapState(usePlayerStore, [
+      "playerPodcast",
+      "playerVideo"
+    ]),
+    srcVideo(): string{
+      if(this.playerVideo){
+        return "//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/"+ this.playerPodcast?.video?.videoId+"/autoplay/1";
+      }
+      return "";
+    }
+  },
+  watch:{
+    srcVideo() {
+      this.goFullScreen();
+    },
+  },
+  mounted(){
+    this.goFullScreen();
+  },
+  methods:{
+    goFullScreen(){
+      if(""===this.srcVideo){return;}
+      switch (screen.orientation.type) {
+        case "landscape-primary":
+        case "landscape-secondary":
+          (this.$refs.iframeVideo as Element).requestFullscreen();
+          break;
+        case "portrait-secondary":
+        case "portrait-primary":
+          console.log("Portrait mode");
+          break;
+        default:
+          console.log("The orientation API isn't supported in this browser :(");
+      }
+    }
+  }
+
+});
+</script>

package/src/components/misc/player/PlayerVideoHls.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="video-player">
+    <div v-if="errorPlay.length" class="video-live-error">{{errorPlay}}</div>
+    <video
+      v-show="useVideoSrc"
+      ref="videoelement"
+      playsinline
+    />
+    <div
+      ref="videocontainer"
+      class="video-container"
+    />
+  </div>
+</template>
+<script lang="ts">
+
+// @ts-ignore
+import Clappr from '@clappr/core';
+// @ts-ignore
+import HlsjsPlayback from '@clappr/hlsjs-playback';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "PlayerVideoHls",
+
+  props: {
+    hlsUrl: { default: "", type: String },
+  },
+
+  emits:['changeValid'],
+  data() {
+    return {
+      errorPlay: "" as string,
+      useVideoSrc: false as boolean,
+      player: undefined as Clappr.Player,
+      playing: false as boolean,
+      stalledTimout: undefined as ReturnType<typeof setTimeout>|undefined,
+    };
+  },
+  computed:{
+    videoContainer(): HTMLElement{
+      return (this.$refs.videocontainer as HTMLElement);
+    },
+    videoElement(): HTMLVideoElement{
+      return (this.$refs.videoelement as HTMLVideoElement);
+    },
+  },
+  mounted(){
+    this.playLive();
+  },
+
+  beforeUnmount() { 
+    if(this.playing){
+      this.stopLive();
+    }
+  },
+
+  methods: {
+    definedStalledTimeout(){
+      this.stalledTimout =setTimeout(()=>{
+        this.videoClean();
+        this.playLive();
+      }, 5000);
+    },
+    async playLive(): Promise<void> {
+      clearTimeout(this.stalledTimout);
+      this.definedStalledTimeout();
+      if (this.videoElement.canPlayType('application/vnd.apple.mpegurl') && !navigator.userAgent.includes('Android')) {
+        this.useVideoSrc = true;
+        this.playLiveIos();
+        return;
+      }
+      this.player = new Clappr.Player({
+        source: this.hlsUrl,
+        autoPlay: false,
+        height: '100%',
+        width: '100%',
+        plugins: {
+          playback: [HlsjsPlayback],
+        },
+        playback: {
+          controls: true,
+          playInline: true,
+          hlsjsConfig: {
+            enableWorker: false,
+            debug:true,
+          }
+        },
+        events: {
+          onError: async(error: Clappr.error) =>{
+            this.stopLive();
+            if (error.description && error.description.includes('403')) {
+              this.errorPlay = this.$t('Video is unavailable');
+            }else{
+              this.errorPlay = this.$t('Podcast play error');
+            }
+          },
+          onPlay:()=>{
+            this.errorPlay = "";
+            this.playing = true; 
+          },
+          onTimeUpdate:()=>{
+            clearTimeout(this.stalledTimout);
+            this.definedStalledTimeout();
+          }
+        }
+      });
+      this.playing = true; 
+      this.player.attachTo(this.videoContainer);
+      if(0!==this.videoContainer.getElementsByTagName("video").length){
+        this.videoContainer.getElementsByTagName("video")[0].play();
+      }
+    },
+    async playLiveIos(): Promise<void>{
+      this.videoElement.onloadedmetadata = ()=>{
+        const playPromise =  this.videoElement.play();
+        if (playPromise !== undefined) {
+          playPromise.then(() => {
+            this.errorPlay = "";
+            this.playing = true; 
+          })
+          .catch(() => {
+            this.playing = false; 
+          });
+        }
+      };
+      this.videoElement.onerror = async()=>{
+        this.stopLive();
+        this.errorPlay = this.$t('Podcast play error');
+      };
+       this.videoElement.ontimeupdate = async()=>{
+          clearTimeout(this.stalledTimout);
+          this.definedStalledTimeout();
+      };
+      this.videoElement.src = this.hlsUrl;
+    },
+    videoClean(): void{
+      if(this.useVideoSrc){
+        this.videoElement.pause();
+        this.videoElement.removeAttribute('src');
+        this.videoElement.load();
+        return;
+      }
+      this.player.destroy();
+    },
+    stopLive(): void{
+      clearTimeout(this.stalledTimout);
+      this.errorPlay = "";
+      this.videoClean();
+      this.playing = false;
+    },
+  },
+
+});
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+.octopus-app{
+  .video-live-error{
+    text-align: center;
+    width: 100%;
+    font-size: 1rem;
+    font-weight: bold;
+    padding: 0.2rem 0;
+    color: white;
+    position: absolute;
+    top: 0;
+    background: $danger;
+    z-index: 1;
+  }
+  .video-container{
+    width: 500px;
+    height: 281px;
+  }
+}
+</style>

package/src/locale/de.ts

@@ -343,4 +343,5 @@ export default {
   "UnorderedList":"Ungeordnete Liste",
   "List":"Aufführen",
   "Display HTML":"HTML anzeigen",
+  "Video is unavailable":"Video ist nicht verfügbar",
 };

package/src/locale/en.ts

@@ -343,4 +343,5 @@ export default {
   "UnorderedList":"Unordered list",
   "List":"List",
   "Display HTML":"Display HTML",
+  "Video is unavailable":"Video is unavailable",
 };

package/src/locale/es.ts

@@ -344,4 +344,5 @@ export default {
   "UnorderedList":"Lista desordenada",
   "List":"Lista",
   "Display HTML":"Mostrar HTML",
+  "Video is unavailable":"El vídeo no está disponible",
 };

package/src/locale/fr.ts

@@ -350,4 +350,5 @@ export default {
   "UnorderedList":"Liste non ordonnée",
   "List":"Liste",
   "Display HTML":"Afficher HTML",
+  "Video is unavailable":"La vidéo est indisponible",
 };

package/src/locale/it.ts

@@ -338,4 +338,5 @@ export default {
   "UnorderedList":"Lista non ordinata",
   "List":"Elenco",
   "Display HTML":"Visualizza HTML",
+  "Video is unavailable":"Il video non è disponibile",
 };

package/src/locale/sl.ts

@@ -333,4 +333,5 @@ export default {
   "UnorderedList":"Neurejen seznam",
   "List":"Seznam",
   "Display HTML":"Prikaži HTML",
+  "Video is unavailable":"Videoposnetek ni na voljo",
 };

package/src/stores/PlayerStore.ts

@@ -21,6 +21,7 @@ interface PlayerState {
   playerSeekTime?: number;
   playerTranscript?: Transcript;
   playerLargeVersion: boolean;
+  playerVideo: boolean;
 }
 export const usePlayerStore = defineStore("PlayerStore", {
   state: (): PlayerState => ({
@@ -34,10 +35,12 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerRadio: undefined,
     playerSeekTime: 0,
     playerLargeVersion: false,
+    playerVideo: false,
   }),
   getters: {
     playerHeight() {
       if ("STOPPED" === this.playerStatus) return 0;
+      if (this.playerVideo) return "0px"/* "281px" */;
       if (this.playerLargeVersion) return "27rem";
       if (window.innerWidth > 450) return "5rem";
       return "3.5rem";
@@ -88,7 +91,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
     },
   },
   actions: {
-    playerPlay(param?: any) {
+    playerPlay(param?: any, isVideo = false) {
       if (!param) {
         this.playerStatus = "STOPPED";
         this.playerPodcast = undefined;
@@ -96,13 +99,14 @@ export const usePlayerStore = defineStore("PlayerStore", {
         this.playerLive = undefined;
         this.playerRadio = undefined;
         this.playerElapsed = 0;
+        this.playerVideo = false;
         return;
       }
       if (
         (this.playerPodcast &&
-          this.playerPodcast.podcastId === param.podcastId) ||
+          this.playerPodcast.podcastId === param.podcastId && isVideo === this.playerVideo) ||
         (this.playerMedia && this.playerMedia.mediaId === param.mediaId) ||
-        (this.playerLive && this.playerLive.conferenceId === param.conferenceId)
+        (this.playerLive && this.playerLive.conferenceId === param.conferenceId && isVideo === this.playerVideo)
       ) {
         //Do nothing
         return;
@@ -112,6 +116,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
       this.playerMedia = undefined;
       this.playerLive = undefined;
       this.playerRadio = undefined;
+      this.playerVideo = isVideo;
       this.playerElapsed = 0;
       if (
         param.conferenceId &&

package/src/stores/class/conference/conference.ts

@@ -33,4 +33,5 @@ export interface Conference {
   websocket?: string;
   interval?: ReturnType<typeof setTimeout>;
   duration?: number;
+  videoProfile?:string;
 }

package/src/stores/class/general/podcast.ts

@@ -2,6 +2,7 @@ import { Emission, emptyEmissionData } from "./emission";
 import { Organisation } from "./organisation";
 import { Participant } from "./participant";
 import { Person } from "../user/person";
+import { Video } from "./video";
 export interface Podcast {
   imageUrl?: string;
   animators?: Array<Participant>;
@@ -39,7 +40,9 @@ export interface Podcast {
   title: string;
   weekDownloadCount?: number;
   order?: number;
+  video?: Video;
 }
+
 export function emptyPodcastData(): Podcast {
   return {
     podcastId: 0,

package/src/stores/class/general/video.ts

@@ -0,0 +1,8 @@
+export interface Video {
+  disposable: boolean;
+  masterUrl: string;
+  provider: string;  // digiteka
+  status: string;  // UP_TO_DATE
+  updateDate: string;
+  videoId: string;
+}