Merge Sagitta release to master

AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/MKPlayerConfigEnum.ts

@@ -0,0 +1,14 @@
+export enum MKPlayerType {
+    Html5 = "html5",
+    Native = "native",
+    WebRtc = "webrtc",
+    Unknown = "unknown"
+}
+export enum MKStreamType {
+    Hls = "hls",
+    Dash = "dash",
+    Progressive = "progressive",
+    Smooth = "smooth",
+    Whep = "whep",
+    Unknown = "unknown"
+};

AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue

@@ -70,6 +70,7 @@
     import { contentData } from '../data/content';
     import { AzureMediaAssetModel } from '../models/content/videoAssetModel';
     import { MKPlayer } from '@mediakind/mkplayer';
+    import { MKPlayerType, MKStreamType } from '../MKPlayerConfigEnum';
 
     export default Vue.extend({
         props: {
@@ -198,7 +199,8 @@
                             ui: false,
                             playback: {
                                 muted: false,
-                                autoplay: false
+                                autoplay: false,
+                                preferredTech: [{ player: MKPlayerType.Html5, streaming: MKStreamType.Hls }]   // to force the player to use html5 player instead of native on safari
                             },
                             theme: "dark",
                             events: {

LearningHub.Nhs.WebUI/Scripts/vuesrc/MKPlayerConfigEnum.ts

@@ -0,0 +1,14 @@
+export enum MKPlayerType {
+    Html5 = "html5",
+    Native = "native",
+    WebRtc = "webrtc",
+    Unknown = "unknown"
+}
+export enum MKStreamType {
+    Hls = "hls",
+    Dash = "dash",
+    Progressive = "progressive",
+    Smooth = "smooth",
+    Whep = "whep",
+    Unknown = "unknown"
+};

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue

@@ -33,6 +33,9 @@
     import { VideoFileModel } from '../../models/contribute-resource/blocks/videoFileModel';
     import { MKPlayer } from '@mediakind/mkplayer';
     import { resourceData } from '../../data/resource';
+    import { MKPlayerType, MKStreamType } from '../../MKPlayerConfigEnum';
+    //import { MKPlayerType } from '@mediakind/mkplayer/types/enums/MKPlayerType.d';
+    //import { MKStreamType } from '@mediakind/mkplayer/types/enums/MKStreamType.d';
     export default Vue.extend({
         props: {
             fileId: Number,
@@ -52,7 +55,7 @@
             await this.getMKIOPlayerKey();
             this.getMediaPlayUrl();
             this.load();
-        },        
+        },
         methods: {
             onPlayerReady() {
                 const videoElement = document.getElementById("bitmovinplayer-video-" + this.getPlayerUniqueId) as HTMLVideoElement;
@@ -86,67 +89,68 @@
             getMediaPlayUrl() {
                 this.playBackUrl = this.videoFile.locatorUri;
                 this.playBackUrl = this.playBackUrl.substring(0, this.playBackUrl.lastIndexOf("manifest")) + "manifest(format=m3u8-cmaf,encryption=cbc)";
-                // this.playBackUrl = "https://ep-defaultlhdev-mediakind02-dev-by-am-sl.uksouth.streaming.mediakind.com/d01d30e4-461f-4045-bc10-3c88a296f3af/manifest.ism/manifest(format=m3u8-cmaf,encryption=cbc)"
             },
             load() {
-                 // Grab the video container
-                 this.videoContainer = document.getElementById(this.getPlayerUniqueId);
+                // Grab the video container
+                this.videoContainer = document.getElementById(this.getPlayerUniqueId);
 
-                 if(!this.mkioKey) {
-                     this.getMKIOPlayerKey();
-                 }
 
-                 // Prepare the player configuration
-                 const playerConfig = {
-                     key: this.mkioKey,
-                     ui: false,
-                     theme: "dark",
-                     playback: {
-                         muted: false,
-                         autoplay: false,
-                     },
-                     events: {
-                         //error: this.onPlayerError,
-                         //timechanged: this.onTimeChanged,
-                         //onpause: this.onpause,
-                         //onplay: this.onplay,
-                         //muted: this.onMuted,
-                         //unmuted: this.onUnmuted,
-                         ready: this.onPlayerReady,
-                         subtitleadded: this.onSubtitleAdded,
+                if (!this.mkioKey) {
+                    this.getMKIOPlayerKey();
+                }
 
-                         //playbackspeed: this.onPlaybackSpeed
-                     }
-                 };
+                // Prepare the player configuration
+                const playerConfig = {
+                    key: this.mkioKey,
+                    ui: false,
+                    theme: "dark",
+                    playback: {
+                        muted: false,
+                        autoplay: false,
+                        preferredTech: [{ player: MKPlayerType.Html5, streaming: MKStreamType.Hls }]   // to force the player to use html5 player instead of native on safari
+                    },
+                    events: {
+                        //error: this.onPlayerError,
+                        //timechanged: this.onTimeChanged,
+                        //onpause: this.onpause,
+                        //onplay: this.onplay,
+                        //muted: this.onMuted,
+                        //unmuted: this.onUnmuted,
+                        ready: this.onPlayerReady,
+                        subtitleadded: this.onSubtitleAdded,
 
-                 // Initialize the player with video container and player configuration
-                 this.player = new MKPlayer(this.videoContainer, playerConfig);
+                        //playbackspeed: this.onPlaybackSpeed
+                    }
+                };
 
-                 // ClearKey DRM configuration
-                 var clearKeyConfig = {
-                     //LA_URL: "https://ottapp-appgw-amp.prodc.mkio.tv3cloud.com/drm/clear-key?ownerUid=azuki",
-                     LA_URL:"HLS_AES",
-                     headers: {
-                         "Authorization": this.getBearerToken()
-                     }
-                 };
+                // Initialize the player with video container and player configuration
+                this.player = new MKPlayer(this.videoContainer, playerConfig);
 
-                 // Load source
-                 const sourceConfig = {
-                     hls: this.playBackUrl,
-                     drm: {
-                         clearkey: clearKeyConfig
-                     }
-                 };
+                // ClearKey DRM configuration
+                var clearKeyConfig = {
+                    //LA_URL: "https://ottapp-appgw-amp.prodc.mkio.tv3cloud.com/drm/clear-key?ownerUid=azuki",
+                    LA_URL: "HLS_AES",
+                    headers: {
+                        "Authorization": this.getBearerToken()
+                    }
+                };
 
-                 this.player.load(sourceConfig)
-                     .then(() => {
-                         console.log("Source loaded successfully!");
-                     })
-                     .catch(() => {
-                         console.error("An error occurred while loading the source!");
-                     });
-                }
+                // Load source
+                const sourceConfig = {
+                    hls: this.playBackUrl,
+                    drm: {
+                        clearkey: clearKeyConfig
+                    }
+                };
+
+                this.player.load(sourceConfig)
+                    .then(() => {
+                        console.log("Source loaded successfully!");
+                    })
+                    .catch(() => {
+                        console.error("An error occurred while loading the source!");
+                    });
+            }
         },
         computed: {
             getPlayerUniqueId(): string {

LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue

@@ -100,6 +100,7 @@
     import { getQueryParam } from './helpers/getQueryParam';
     import { setResourceCetificateLink } from './helpers/resourceCertificateHelper';
     import { MKPlayer } from '@mediakind/mkplayer';
+    import { MKPlayerType, MKStreamType } from '../MKPlayerConfigEnum';
 
     Vue.use(Vuelidate as any);
 
@@ -280,6 +281,7 @@
                     playback: {
                         muted: false,
                         autoplay: false,
+                        preferredTech: [{ player: MKPlayerType.Html5, streaming: MKStreamType.Hls }]   // to force the player to use html5 player instead of native on safari
                     },
                     events: {
                         //error: this.onPlayerError,
@@ -301,7 +303,7 @@
                 // ClearKey DRM configuration
                 var clearKeyConfig = {
                     //LA_URL: "https://ottapp-appgw-amp.prodc.mkio.tv3cloud.com/drm/clear-key?ownerUid=azuki",
-                    LA_URL:"HLS_AES",
+                    LA_URL: "HLS_AES",
                     headers: {
                         "Authorization": this.getBearerToken()
                     }

LearningHub.Nhs.WebUI/Views/Home/_CmsVideo.cshtml

@@ -63,7 +63,8 @@
         theme: "dark",
         playback: {
             muted: false,
-            autoplay: false
+            autoplay: false,
+            preferredTech: [{ player: 'html5', streaming: 'hls' }]
         },
 
         // Subscribe to player events