Merge Tucana Release to master

AdminUI/LearningHub.Nhs.AdminUI/Controllers/api/MediaManifestProxyController.cs

@@ -51,16 +51,27 @@ public string Get(string playBackUrl, string token)
                 {
                     using (var reader = new StreamReader(stream))
                     {
-                        const string qualityLevelRegex = @"(QualityLevels\(\d+\))";
+                        const string qualityLevelRegex = @"(|)([^""\s]+\.m3u8\(encryption=cbc\))";
                         const string fragmentsRegex = @"(Fragments\([\w\d=-]+,[\w\d=-]+\))";
-                        const string urlRegex = @"("")(https?:\/\/[\da-z\.-]+\.[a-z\.]{2,6}[\/\w \.-]*\/?[\?&][^&=]+=[^&=#]*)("")";
+                        const string urlRegex = @"(https?:\/\/[\da-z\.-]+\.[a-z\.]{2,6}[\/\w \.-]*\?[^,\s""]*)";
 
                         var baseUrl = playBackUrl.Substring(0, playBackUrl.IndexOf(".ism", System.StringComparison.OrdinalIgnoreCase)) + ".ism";
                         this.logger.LogDebug($"baseUrl={baseUrl}");
 
                         var content = reader.ReadToEnd();
 
-                        var newContent = Regex.Replace(content, urlRegex, string.Format(CultureInfo.InvariantCulture, "$1$2&token={0}$3", token));
+                        content = ReplaceUrisWithProxy(content, baseUrl);
+                        var newContent = Regex.Replace(content, urlRegex, match =>
+                        {
+                            string baseUrlWithQuery = match.Groups[1].Value;  // URL including the query string
+
+                            // Append the token correctly without modifying surrounding characters
+                            string newUrl = baseUrlWithQuery.Contains("?") ?
+                                            $"{baseUrlWithQuery}&token={token}" :
+                                            $"{baseUrlWithQuery}?token={token}";
+
+                            return newUrl;
+                        });
                         this.logger.LogDebug($"newContent={newContent}");
 
                         var match = Regex.Match(playBackUrl, qualityLevelRegex);
@@ -87,5 +98,33 @@ public string Get(string playBackUrl, string token)
 
             return null;
         }
+
+        private static string ReplaceUrisWithProxy(string playlistContent, string proxyUrl)
+        {
+            // Split the playlist content into lines
+            var lines = playlistContent.Split(new[] { "\r\n", "\n" }, StringSplitOptions.None);
+
+            // Process each line to replace media or map URIs
+            for (int i = 0; i < lines.Length; i++)
+            {
+                if (lines[i].StartsWith("#EXT-X-MAP:URI=", StringComparison.OrdinalIgnoreCase))
+                {
+                    // Extract the URI from the current line for EXT-X-MAP
+                    var existingUri = lines[i].Substring(lines[i].IndexOf('=') + 1).Trim('"');
+                    var newUri = $"{proxyUrl}/{existingUri}";
+                    lines[i] = lines[i].Replace(existingUri, newUri);
+                }
+                else if (lines[i].StartsWith("#EXTINF:", StringComparison.OrdinalIgnoreCase) && i + 1 < lines.Length)
+                {
+                    // Get the URI from the next line for EXTINF
+                    var existingUri = lines[i + 1].Trim();
+                    var newUri = $"{proxyUrl}/{existingUri}";
+                    lines[i + 1] = newUri;
+                }
+            }
+
+            // Join the modified lines back into a single string
+            return string.Join("\r\n", lines);
+        }
     }
 }

AdminUI/LearningHub.Nhs.AdminUI/LearningHub.Nhs.AdminUI.csproj

@@ -89,7 +89,7 @@
     <PackageReference Include="HtmlSanitizer" Version="6.0.453" />
 	<PackageReference Include="IdentityModel" Version="4.4.0" />
     <PackageReference Include="LearningHub.Nhs.Caching" Version="2.0.2" />
-    <PackageReference Include="LearningHub.Nhs.Models" Version="3.0.41" />
+    <PackageReference Include="LearningHub.Nhs.Models" Version="3.0.43" />
     <PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.19.0" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="6.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="6.0.0" />

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

@@ -71,6 +71,8 @@
     import { AzureMediaAssetModel } from '../models/content/videoAssetModel';
     import { MKPlayer } from '@mediakind/mkplayer';
     import { MKPlayerType, MKStreamType } from '../MKPlayerConfigEnum';
+    //import { getPlayerConfig, getSourceConfig, initializePlayer } from '../mkiomediaplayer';
+    import { buildControlbar } from '../mkioplayer-controlbar';
 
     export default Vue.extend({
         props: {
@@ -89,14 +91,20 @@
                 player: null,
                 videoContainer: null,
                 mkioKey: '',
+                isIphone: false,
+                requestURL: ''
             };
         },
-         async created(): Promise<void> {
+        async created(): Promise<void> {
             await this.getMKIOPlayerKey();
             this.load();
             this.getDisplayAVFlag();
             this.getAudioVideoUnavailableView();
         },
+        mounted() {
+            this.checkIfIphone();
+            this.requestURL = window.location.origin;
+        },
         computed: {
             getStyle() {
                 console.log("getLinkStyle", (this.pageSectionDetail || {}).draftHidden);
@@ -168,11 +176,37 @@
                     this.audioVideoUnavailableView = response;
                 });
             },
+            //onSubtitleAdded() {
+            //    this.player.subtitles.enable("subtitle" + this.section.id.toString());
+            //},
             onPlayerReady() {
-                const videoElement = document.getElementById("bitmovinplayer-video-" + this.getPlayerUniqueId) as HTMLVideoElement;
-                if (videoElement) {
-                    videoElement.controls = true;
-                }
+                var contanierId = this.section.id.toString();
+                var uniquePlayer = this.player;// ([email protected]);
+                buildControlbar(contanierId, uniquePlayer);
+
+                // [BY] When we set UI to false we need to manually add the controls to the video element
+                //const videoElement = document.getElementById("bitmovinplayer-video-" + this.getPlayerUniqueId) as HTMLVideoElement;
+                //if (videoElement) {
+                //    videoElement.controls = true;
+                //}
+
+                //  var subtitleTrack;
+                //if (this.pageSectionDetail.videoAsset.azureMediaAsset && this.pageSectionDetail.videoAsset.closedCaptionsFile) {
+                //    const captionsInfo = this.pageSectionDetail.videoAsset.closedCaptionsFile;
+                //    var srcPath = "file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
+                //    //srcPath = '@requestURL' + srcPath;
+                //    srcPath = "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt";
+
+                //    subtitleTrack = {
+                //        id: "subtitle" + this.section.id.toString(),
+                //        lang: "en",
+                //        label: "english",
+                //        url: srcPath,
+                //        kind: "subtitle"
+                //    };
+                //};
+
+                //this.player.addSubtitle(subtitleTrack);
             },
             async getMKIOPlayerKey(): Promise<void> {
                 this.mkioKey = await contentData.getMKPlayerKey();
@@ -189,14 +223,14 @@
                         // Grab the video container
                         this.videoContainer = document.getElementById(this.getPlayerUniqueId);
 
-                        if(!this.mkioKey) {
+                        if (!this.mkioKey) {
                             this.getMKIOPlayerKey();
                         }
 
                         // Prepare the player configuration
                         const playerConfig = {
                             key: this.mkioKey,
-                            ui: false,
+                            ui: true,
                             playback: {
                                 muted: false,
                                 autoplay: false,
@@ -205,15 +239,33 @@
                             theme: "dark",
                             events: {
                                 ready: this.onPlayerReady,
+                                //subtitleadded: this.onSubtitleAdded,
                             }
                         };
 
                         // Initialize the player with video container and player configuration
                         this.player = new MKPlayer(this.videoContainer, playerConfig);
 
+                        var subtitleTrack = null;
+                        var sectionId = this.section.id.toString();
+                        if (this.pageSectionDetail.videoAsset.azureMediaAsset && this.pageSectionDetail.videoAsset.closedCaptionsFile) {
+                            var captionsInfo = this.pageSectionDetail.videoAsset.closedCaptionsFile;;
+
+                            if (captionsInfo) {
+                                var srcPath = "/file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
+                                subtitleTrack = {
+                                    id: "subtitle" + sectionId,
+                                    lang: "en",
+                                    label: "english",
+                                    url: this.requestURL + srcPath,
+                                    kind: "subtitle"
+                                };
+                            }
+                        }
                         // Load source
                         const sourceConfig = {
                             hls: this.getMediaPlayUrl(this.pageSectionDetail.videoAsset.azureMediaAsset.locatorUri),
+                            subtitleTracks: [subtitleTrack],
                             drm: {
                                 clearkey: {
                                     LA_URL: "HLS_AES",
@@ -282,8 +334,18 @@
             },
             getMediaPlayUrl(url: string): string {
                 let sourceUrl = url.substring(0, url.lastIndexOf("manifest")) + "manifest(format=m3u8-cmaf,encryption=cbc)";
+
+                if (this.isIphone) {
+                    var token = this.pageSectionDetail.videoAsset.azureMediaAsset.authenticationToken;
+                    sourceUrl = "/Media/MediaManifest?playBackUrl=" + sourceUrl + "&token=" + token;
+                }   
+
                 return sourceUrl;
             },
+            checkIfIphone() {
+                const userAgent = navigator.userAgent || navigator.vendor;
+                this.isIphone = /iPhone/i.test(userAgent);
+            },
         },
         watch: {
             section() {
@@ -318,4 +380,8 @@
         video[id^="bitmovinplayer-video"] {
             width: 100%;
         }
+
+    .bmpui-ui-controlbar .control-right {
+        float: right;
+    }
 </style>

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

@@ -2,7 +2,7 @@
     <div>
         <div class="toolBarBox">
             <div class="toolBar">
-                <div :style="getStatusStyle()" class="mr-4 p-3">
+                <div :style="getStatusStyle()" class="mr-1 p-2">
                     <i :class="contentLib.getPageSectionStatusIcon(this.pageSection.pageSectionDetail)"></i>
                     {{ contentLib.getPageSectionStatusText(this.pageSection.pageSectionDetail) }}
                 </div>
@@ -167,8 +167,8 @@
         methods: {
             getStatusStyle(): string {
                 return this.pageSection.pageSectionDetail.pageSectionStatus === PageSectionStatus.Live
-                    ? 'background: #007F3B; height: 45px; margin: -8px;border: 1px solid #FFFFFF;'
-                    : ((this.pageSection.pageSectionDetail.deletePending == null || !this.pageSection.pageSectionDetail.deletePending) ? 'background: #FFB81C; height: 45px; margin: -8px;border: 1px solid #FFFFFF;color: #425563;' : 'background: #DA291C; height: 45px; margin: -8px; border: 1px solid #FFFFFF;');
+                    ? 'background: #007F3B; height: 50px; margin: -12px;border: 1px solid #FFFFFF;'
+                    : ((this.pageSection.pageSectionDetail.deletePending == null || !this.pageSection.pageSectionDetail.deletePending) ? 'background: #FFB81C; height: 50px; margin: -12px;border: 1px solid #FFFFFF;color: #425563;' : 'background: #DA291C; height: 50px; margin: -12px; border: 1px solid #FFFFFF;');
             },
             getStatusIconStyle(): string {
                 return 'margin-top:20px;'
@@ -215,8 +215,9 @@
 
     .toolBarBox {
         position: absolute;
-        right: 20px;
-        top: 20px;
+        right: 12px;
+        left:10px;
+        top: 2px;
         z-index: 1;
     }
 
@@ -237,7 +238,7 @@
     .toolBar {
         display: flex;
         padding: 16px;
-        height: 64px;
+        height: 60px;
         float: right;
         background: $nhsuk-grey;
         border: 2px solid $nhsuk-white;
@@ -269,4 +270,14 @@
     .toolBarButton i .fa, .fas {
         font-weight: 100;
     }
+    @media (max-width: 420px) {
+        .toolBarBox {
+            position: absolute;
+            right: 12px;
+            left: 10px;
+            top: 2px;
+            z-index: 1;
+            width: fit-content;
+        }
+    }
 </style>

AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/upload/fileValidation.ts

@@ -8,7 +8,7 @@ export const file_size_validation = (value: any) => {
 export const file_extension_validation = (value: any) => {
     if (!value) { return true; }
     let fileExtension = value.name.split(".").pop();
-    let fileType = ['mp4', 'avi', 'm4v', 'mov', 'mkv', 'mpg', 'm2v', 'vob'].find(ext => ext == fileExtension);
+    let fileType = ['mp4', 'avi', 'm4v', 'mov', 'mkv', 'mpg', 'm2v', 'vob','wmv'].find(ext => ext == fileExtension);
     return fileType != undefined;
 };
 export const transcriptfile_extension_validation = (value: any) => {

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

@@ -0,0 +1,101 @@
+import { MKPlayer, MKPlayerConfig } from '@mediakind/mkplayer';
+import { MKPlayerType, MKStreamType } from './MKPlayerConfigEnum';
+interface ClearKeyConfig {
+    LA_URL: string;
+    headers: {
+        Authorization: string;
+    };
+}
+
+interface PlayerConfig {
+    key: string;
+    ui: boolean;
+    playback: {
+        muted: boolean;
+        autoplay: boolean;
+        preferredTech: Array<{ player: string; streaming: string }>;
+    };
+    theme: string;
+    events: {
+        ready: () => void;
+    };
+}
+
+interface SourceConfig {
+    hls: string;
+    drm: {
+        clearkey: ClearKeyConfig;
+    };
+}
+
+function getBearerToken(authenticationToken: string): string {
+    // Replace this with your actual logic to get the bearer token
+    return `Bearer ${authenticationToken}`;
+}
+
+function getPlayerConfig(
+    mkioKey: string,
+    onPlayerReady: () => void
+): PlayerConfig {
+    return {
+        key: mkioKey,
+        ui: true,
+        playback: {
+            muted: false,
+            autoplay: false,
+            preferredTech: [{ player: "Html5", streaming: "Hls" }] // Adjust these strings if you have specific types
+        },
+        theme: "dark",
+        events: {
+            ready: onPlayerReady,
+        }
+    };
+}
+
+function getSourceConfig(
+    locatorUri: string,
+    authenticationToken: string
+): SourceConfig {
+    return {
+        hls: locatorUri,
+        drm: {
+            clearkey: {
+                LA_URL: "HLS_AES",
+                headers: {
+                    Authorization: getBearerToken(authenticationToken)
+                }
+            }
+        }
+    };
+}
+
+function initializePlayer(videoContainer: HTMLElement, playerConfig: MKPlayerConfig, playBackUrl: string, bearerToken: string): any {
+    const player = new MKPlayer(videoContainer, playerConfig);
+
+    var clearKeyConfig = {
+        //LA_URL: "https://ottapp-appgw-amp.prodc.mkio.tv3cloud.com/drm/clear-key?ownerUid=azuki",
+        LA_URL: "HLS_AES",
+        headers: {
+            "Authorization": bearerToken
+        }
+    };
+
+    const sourceConfig: SourceConfig = {
+        hls: playBackUrl,
+        drm: {
+            clearkey: clearKeyConfig
+        }
+    };
+
+    player.load(sourceConfig)
+        .then(() => {
+            console.log("Source loaded successfully!");
+        })
+        .catch(() => {
+            console.error("An error occurred while loading the source!");
+        });
+
+    return player;
+};
+
+export { getPlayerConfig, getSourceConfig, initializePlayer };