@saooti/octopus-sdk 37.0.16 → 37.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.16",
+  "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/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

@@ -110,7 +110,7 @@ export default defineComponent({
       "playerVideo"
     ]),
     isVideoPodcast(): boolean{
-      return undefined!==this.podcast.video?.videoId;
+      return this.fetchConference?.videoProfile?.includes('video_') || undefined!==this.podcast.video?.videoId;
     },
     playingPodcast() {
       return (
@@ -271,7 +271,7 @@ export default defineComponent({
         this.playerPlay({
           ...this.podcast,
           ...{ conferenceId: this.fetchConference?.conferenceId },
-        });
+        }, isVideo);
       }
       if (this.clickPlayGoPage) {
         this.$router.push("/main/pub/podcast/" + this.podcast.podcastId);

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

@@ -6,10 +6,7 @@
     @transitionend="onHidden"
   >
     <template v-if="display">
-      <PlayerVideo 
-        v-if="playerVideo"
-        @close="closePlayer"
-      />
+      <PlayerVideo v-if="playerVideo"/>
       <template v-else>
         <audio
           id="audio-player"
@@ -62,7 +59,7 @@ import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 const PlayerVideo = defineAsyncComponent(
-  () => import("../player/PlayerVideo.vue"),
+  () => import("./PlayerVideo.vue"),
 );
 export default defineComponent({
   name: "PlayerComponent",
@@ -121,9 +118,6 @@ export default defineComponent({
         this.forceHide = false;
       }
     },
-    closePlayer(){
-      this.playerPlay();
-    },
     onPause() {
       if ("PLAYING" === this.playerStatus) {
         this.playerChangeStatus(true);

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

@@ -3,74 +3,60 @@
     <template v-if="playerVideo">
       <button 
         class="btn btn-transparent video-close saooti-remove"
-        @click="$emit('close')"
+        @click="closePlayer"
       />
       <div class="video-wrapper">
-        <iframe 
-          ref="iframeVideo"
-          :src="srcVideo"
-          width="500" 
-          height="281" 
-          style="z-index:1;" 
-          allowfullscreen="true" 
-          allow="autoplay" 
-          referrerpolicy="no-referrer-when-downgrade"
-        ></iframe>
+        <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 } from "pinia";
-import { defineComponent } from "vue";
+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
   },
-  emits:['close'],
-
-  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 "";
+  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";
     }
   },
-  watch:{
-    srcVideo() {
-      this.goFullScreen();
+
+  methods: {
+    ...mapActions(usePlayerStore, ["playerPlay",]),
+    closePlayer(){
+      this.playerPlay();
     },
   },
-  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>
+
 <style lang="scss">
 .octopus-app {
   .video-wrapper{
@@ -85,7 +71,6 @@ export default defineComponent({
     position: fixed;
     bottom: 16.5rem;
     right: 1rem;
-
   }
   @media (max-width: 500px) {
     .video-wrapper{
@@ -103,4 +88,4 @@ export default defineComponent({
     }
   }
 }
-</style>
+</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

@@ -106,7 +106,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         (this.playerPodcast &&
           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;

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

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