@saooti/octopus-sdk 37.0.15 → 37.0.16

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.16",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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/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 undefined!==this.podcast.video?.videoId;
+    },
     playingPodcast() {
       return (
         this.playerPodcast?.podcastId === this.podcast.podcastId ||
@@ -248,16 +257,16 @@ 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,
@@ -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,55 @@
 <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"
+        @close="closePlayer"
       />
+      <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 +60,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("../player/PlayerVideo.vue"),
+);
 export default defineComponent({
   name: "PlayerComponent",
 
   components: {
     PlayerCompact,
     PlayerLarge,
+    PlayerVideo
   },
   mixins: [playerLogic],
   emits: ["hide"],
@@ -85,6 +96,7 @@ export default defineComponent({
       "playerStatus",
       "playerHeight",
       "playerLargeVersion",
+      "playerVideo"
     ]),
     display() {
       return "STOPPED" !== this.playerStatus;
@@ -109,6 +121,9 @@ export default defineComponent({
         this.forceHide = false;
       }
     },
+    closePlayer(){
+      this.playerPlay();
+    },
     onPause() {
       if ("PLAYING" === this.playerStatus) {
         this.playerChangeStatus(true);
@@ -120,7 +135,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,106 @@
+<template>
+  <teleport to=".octopus-app">
+    <template v-if="playerVideo">
+      <button 
+        class="btn btn-transparent video-close saooti-remove"
+        @click="$emit('close')"
+      />
+      <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>
+      </div>
+    </template>
+  </teleport>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "PlayerVideo",
+  components: {
+  },
+  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 "";
+    }
+  },
+  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>
+<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/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,11 +99,12 @@ 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)
       ) {
@@ -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/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;
+}