diff --git a/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue b/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue index 2f874fb12..96d9f3827 100644 --- a/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue +++ b/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue @@ -90,8 +90,8 @@ mkioKey: '', }; }, - created() { - this.getMKIOPlayerKey(); + async created(): Promise { + await this.getMKIOPlayerKey(); this.load(); this.getDisplayAVFlag(); this.getAudioVideoUnavailableView(); @@ -173,7 +173,7 @@ videoElement.controls = true; } }, - async getMKIOPlayerKey() { + async getMKIOPlayerKey(): Promise { this.mkioKey = await contentData.getMKPlayerKey(); //return this.mkioKey; }, @@ -188,11 +188,13 @@ // Grab the video container this.videoContainer = document.getElementById(this.getPlayerUniqueId); - var licenceKey = this.mkioKey;// this.getMKIOPlayerKey(); + if(!this.mkioKey) { + this.getMKIOPlayerKey(); + } // Prepare the player configuration const playerConfig = { - key: licenceKey, + key: this.mkioKey, ui: false, playback: { muted: false, diff --git a/AdminUI/LearningHub.Nhs.AdminUI/Services/MKIOMediaService.cs b/AdminUI/LearningHub.Nhs.AdminUI/Services/MKIOMediaService.cs index 111243840..c4241817b 100644 --- a/AdminUI/LearningHub.Nhs.AdminUI/Services/MKIOMediaService.cs +++ b/AdminUI/LearningHub.Nhs.AdminUI/Services/MKIOMediaService.cs @@ -116,11 +116,12 @@ public async Task DownloadMediaInputAsset(string inputAssetN /// The . public async Task GetContentAuthenticationTokenAsync(string encodedAssetId) { - byte[] tokenSigningKey = Convert.FromBase64String(this.settings.AzureMediaJWTPrimaryKeySecret); + byte[] tokenSigningKey = Convert.FromBase64String(this.settings.MediaKindSettings.JWTPrimaryKeySecret); var keyidentifier = string.Empty; // await this.GetContentKeyIdentifier(encodedAssetId); + int expiryMinutes = 0; // this.settings.AzureMediaJWTTokenExpiryMinutes; - return GetJWTToken(this.settings.AzureMediaIssuer, this.settings.AzureMediaAudience, keyidentifier, tokenSigningKey, this.settings.AzureMediaJWTTokenExpiryMinutes); + return GetJWTToken(this.settings.MediaKindSettings.Issuer, this.settings.MediaKindSettings.Audience, keyidentifier, tokenSigningKey, expiryMinutes); } /// diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue index de58632e7..a6af9b29e 100644 --- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue +++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue @@ -32,6 +32,7 @@ import { FileModel } from '../../models/contribute-resource/files/fileModel'; import { VideoFileModel } from '../../models/contribute-resource/blocks/videoFileModel'; import { MKPlayer } from '@mediakind/mkplayer'; + import { resourceData } from '../../data/resource'; export default Vue.extend({ props: { fileId: Number, @@ -47,65 +48,11 @@ sourceLoaded: true, }; }, - created() { - this.getMKIOPlayerKey(); + async created() { + await this.getMKIOPlayerKey(); this.getMediaPlayUrl(); - }, - mounted() { - // Grab the video container - this.videoContainer = document.getElementById(this.getPlayerUniqueId); - - // 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, - - //playbackspeed: this.onPlaybackSpeed - } - }; - - // Initialize the player with video container and player configuration - this.player = new MKPlayer(this.videoContainer, playerConfig); - - // 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() - } - }; - - // 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!"); - }); - }, + this.load(); + }, methods: { onPlayerReady() { const videoElement = document.getElementById("bitmovinplayer-video-" + this.getPlayerUniqueId) as HTMLVideoElement; @@ -130,8 +77,8 @@ onSubtitleAdded() { }, - getMKIOPlayerKey() { - this.mkioKey = this.$store.state.getMKPlayerLicenceKey; + async getMKIOPlayerKey(): Promise { + this.mkioKey = await resourceData.getMKPlayerKey(); }, getBearerToken() { return "Bearer=" + this.azureMediaServicesToken; @@ -141,6 +88,65 @@ 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); + + 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, + + //playbackspeed: this.onPlaybackSpeed + } + }; + + // Initialize the player with video container and player configuration + this.player = new MKPlayer(this.videoContainer, playerConfig); + + // 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() + } + }; + + // 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 { diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue index 499e22685..2f578bc45 100644 --- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue +++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue @@ -176,16 +176,15 @@ await this.getGeneralUser(); await this.getUserRole(); await this.loadResourceItem(Number(this.$route.params.resId)); - await this.getMKIOPlayerKey(); - await this.getMediaPlayUrl(); - await this.setupMKPlayer(); if (this.userAuthenticated && this.resourceItem.catalogue.restrictedAccess) { await this.loadRoleUserGroups(); } - if (this.userAuthenticated && (this.resourceItem.resourceTypeEnum == ResourceType.VIDEO || this.resourceItem.resourceTypeEnum == ResourceType.AUDIO) && this.hasResourceAccess()) { + await this.getMKIOPlayerKey(); + await this.getMediaPlayUrl(); + await this.setupMKPlayer(); this.addMediaEventListeners(); //this.checkForAutoplay(); } @@ -372,7 +371,6 @@ this.playBackDashUrl = this.resourceItem.videoDetails.resourceAzureMediaAsset.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" + this.playBackUrl; }, getMediaAssetProxyUrl(playBackUrl: string): string { playBackUrl = playBackUrl.substring(0, playBackUrl.lastIndexOf("manifest")) + "manifest(format=mpd-time-cmaf,encryption=cenc)"; diff --git a/LearningHub.Nhs.WebUI/Services/MKIOMediaService.cs b/LearningHub.Nhs.WebUI/Services/MKIOMediaService.cs index eaddbf185..d48d8656e 100644 --- a/LearningHub.Nhs.WebUI/Services/MKIOMediaService.cs +++ b/LearningHub.Nhs.WebUI/Services/MKIOMediaService.cs @@ -90,11 +90,12 @@ public async Task CreateMediaInputAsset(IFormFile file) /// The . public async Task GetContentAuthenticationTokenAsync(string encodedAssetId) { - byte[] tokenSigningKey = Convert.FromBase64String(this.settings.AzureMediaJWTPrimaryKeySecret); + byte[] tokenSigningKey = Convert.FromBase64String(this.settings.MediaKindSettings.JWTPrimaryKeySecret); var keyidentifier = string.Empty; // await this.GetContentKeyIdentifier(encodedAssetId); + int expiryMinutes = 0; // this.settings.AzureMediaJWTTokenExpiryMinutes; - return GetJWTToken(this.settings.AzureMediaIssuer, this.settings.AzureMediaAudience, keyidentifier, tokenSigningKey, this.settings.AzureMediaJWTTokenExpiryMinutes); + return GetJWTToken(this.settings.MediaKindSettings.Issuer, this.settings.MediaKindSettings.Audience, keyidentifier, tokenSigningKey, expiryMinutes); } ///