Skip to content

Commit 879dda1

Browse files
AnjuJose011AnjuJose011
authored
Merge pull request #524 from TechnologyEnhancedLearning/releases/tucana
Reverting landing page changes
2 parents 6f354bb + 0334269 commit 879dda1

File tree

2 files changed

+128
-49
lines changed

2 files changed

+128
-49
lines changed

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

Lines changed: 127 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
@model PageSectionDetailViewModel
33
@{
44
string mkPlayerLicence = (string)ViewData["mkPlayerLicenceKey"];
5-
var scheme = Context?.Request?.Scheme ?? "undefined";
6-
var host = Context?.Request?.Host;
7-
var path = Context?.Request?.Path ?? "undefined";
8-
var requestURL = $"{scheme}://{host}{path}";
95
}
106

7+
@* <link href="~/css/mkplayer-ui.css" rel="stylesheet" asp-append-version="true" /> *@
118
<script type="text/javascript" src="~/js/mkplayer.js" asp-append-version="true"></script>
129

1310
@* @if (Model != null)
@@ -53,7 +50,7 @@
5350
} *@
5451
<div class="video-container" id="@($"{"videoContainer"}{Model.Id}")"></div>
5552

56-
<script type="text/javascript">
53+
<script>
5754
5855
var model = @Json.Serialize(Model);
5956
// 1. Grab the video container
@@ -62,65 +59,142 @@
6259
// 2. Prepare the player configuration
6360
var playerConfig = {
6461
key: "@mkPlayerLicence",
65-
ui: true,
62+
ui: false,
6663
theme: "dark",
6764
playback: {
6865
muted: false,
6966
autoplay: false,
7067
preferredTech: [{ player: 'html5', streaming: 'hls' }]
71-
}
68+
},
69+
70+
// Subscribe to player events
71+
events: {
72+
[mkplayer.MKPlayerEvent.Error]: (event) => {
73+
console.log("Encountered player error: ", JSON.stringify(event));
74+
},
75+
[mkplayer.MKPlayerEvent.TimeChanged]: (event) => {
76+
console.log("Current player position: ", event.time);
77+
},
78+
[mkplayer.MKPlayerEvent.Muted]: (data) => {
79+
console.log("Audio muted!")
80+
},
81+
[mkplayer.MKPlayerEvent.Unmuted]: onUnmute,
82+
83+
[mkplayer.MKPlayerEvent.Ready]: () => {
84+
85+
// debugger;
86+
//var caption = model.videoAsset.closedCaptionsFile.fileName;
87+
88+
// var subtitleTrack = {
89+
// id: "@($"{"subid"}{Model.Id}")",
90+
// lang: "en",
91+
// label: "Custom Subtitle",
92+
// url: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt",
93+
// kind: "subtitle"
94+
// };
95+
// player.addSubtitle(subtitleTrack);
96+
},
97+
[mkplayer.MKPlayerEvent.SubtitleAdded]: () => {
98+
// player.enableSubtitle("@($"{"subid"}{Model.Id}")");
99+
},
100+
[mkplayer.MKPlayerEvent.playbackSpeed]: (data) => {
101+
alert("Video playback quality changed to: ");
102+
},
103+
}
72104
};
73105
74106
// 3. Initialize the player with video container and player configuration
75107
var player = new mkplayer.MKPlayer(videoContainer, playerConfig);
76108
77-
// [BY] Commenting and leaving this code here for future reference : When we set UI:false, we need to manually add controls
78-
// -----------------------------------------------------------------------------------------------------------------------
79-
// player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
80-
// const videoElement = document.getElementById("@($"{"bitmovinplayer-video-videoContainer"}{Model.Id}")");
81-
// if (videoElement) {
82-
// videoElement.controls = true;
83-
84-
// // Check if captions available
85-
// if (model.videoAsset.closedCaptionsFile) {
86-
// const captionsInfo = model.videoAsset.closedCaptionsFile;
87-
// if (captionsInfo.filePath) {
88-
// const trackElement = document.createElement('track');
89-
// const srcPath = "/file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
90-
// trackElement.kind = 'captions'; // Or 'subtitles' or 'descriptions' depending on your track type
91-
// trackElement.label = captionsInfo.language || 'english';
92-
// trackElement.srclang = captionsInfo.language || 'en';
93-
// trackElement.src = srcPath;
94-
95-
// // Append the track to the video element
96-
// videoElement.appendChild(trackElement);
97-
// }
98-
// }
99-
// }
100-
// });
101-
// -----------------------------------------------------------------------------------------------------------------------
109+
player.on("loaded", () => {
110+
playerElement.addEventListener("mousemove", () => {
111+
});
112+
});
113+
114+
player.on(mkplayer.MKPlayerEvent.SourceLoaded, (event) => {
115+
console.log("Source loaded successfully!");
116+
});
117+
118+
player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
119+
120+
const videoElement = document.getElementById("@($"{"bitmovinplayer-video-videoContainer"}{Model.Id}")");
121+
if (videoElement) {
122+
videoElement.controls = true;
123+
// debugger;
124+
// Check if captions available
125+
if (model.videoAsset.closedCaptionsFile) {
126+
const captionsInfo = model.videoAsset.closedCaptionsFile;
127+
if (captionsInfo.filePath) {
128+
const trackElement = document.createElement('track');
129+
// const srcPath = "/file/download?filePath=" + captionsInfo.filePath + "&fileName=" + captionsInfo.fileName;
130+
const srcPath = "/file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
131+
trackElement.kind = 'captions'; // Or 'subtitles' or 'descriptions' depending on your track type
132+
trackElement.label = captionsInfo.language || 'english';
133+
trackElement.srclang = captionsInfo.language || 'en';
134+
// trackElement.src = "/api/resource/DownloadResource?filePath=396eb836-5cf5-4255-b33f-66a31fdbef39&amp;fileName=samplecaption.vtt";
135+
// trackElement.src = "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt";
136+
trackElement.src = srcPath;
137+
138+
139+
// Append the track to the video element
140+
videoElement.appendChild(trackElement);
141+
142+
// Add event listener to TextTrackList for when a new text track is added
143+
// videoElement.textTracks.addEventListener('addtrack', function (event) {
144+
// let track = event.track;
145+
// console.log('Track added:', track);
146+
147+
// if (track.kind === 'subtitles' || track.kind === 'captions') {
148+
// track.mode = 'showing'; // Automatically show captions
149+
// console.log('Track showing:', track);
150+
// }
151+
// });
152+
153+
// trackElement.addEventListener('load', function () {
154+
// debugger;
155+
// this.track.mode = 'showing'; // Automatically show captions
156+
// alert('Track loaded and showing:', this.track);
157+
// });
158+
159+
// Manually check and set track mode after a slight delay
160+
// setTimeout(() => {
161+
// var textTracks = videoElement.textTracks;
162+
// for (let i = 0; i < textTracks.length; i++) {
163+
// if ((textTracks[i].kind === 'subtitles' || textTracks[i].kind === 'captions') && textTracks[i].src === srcPath) {
164+
// textTracks[i].mode = 'showing';
165+
// debugger;
166+
// console.log('Track set to showing:', textTracks[i]);
167+
// }
168+
// }
169+
// }, 1000);
170+
171+
// Ensure the track is loaded and ready
172+
// trackElement.addEventListener('load', function () {
173+
// debugger;
174+
// this.mode = 'showing'; // Automatically show captions
175+
// });
176+
177+
}
178+
}
179+
}
180+
181+
// document.getElementById("@($"{"bitmovinplayer-video-videoContainer"}{Model.Id}")").controls = true;
182+
// console.log("Player is ready for playback!");
183+
});
102184
103185
var url = model.videoAsset.azureMediaAsset.locatorUri;
104186
url = url.substring(0, url.lastIndexOf("manifest")) + "manifest(format=m3u8-cmaf,encryption=cbc)";
105187
106-
var subtitleTrack = null;
107-
if (model.videoAsset.closedCaptionsFile) {
108-
const captionsInfo = model.videoAsset.closedCaptionsFile;
109-
var srcPath = "file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
110-
srcPath = '@requestURL' + srcPath;
111-
112-
subtitleTrack = {
113-
id: "subtitle",
114-
lang: "en",
115-
label: "english",
116-
url: srcPath,
117-
kind: "subtitle"
118-
};
119-
}
120-
121188
var sourceConfig = {
122189
hls: url,
123-
subtitleTracks: [subtitleTrack],
190+
// Custom subtitle track
191+
// subtitleTracks: [{
192+
// id: "sub1",
193+
// lang: "en",
194+
// label: "Custom Subtitle",
195+
// url: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt",
196+
// kind: "subtitle"
197+
// }],
124198
drm: {
125199
clearkey: {
126200
LA_URL: "HLS_AES",
@@ -133,11 +207,16 @@
133207
134208
player.load(sourceConfig)
135209
.then(() => {
210+
// you can also get notified when subscribed to `SourceLoaded` event.
136211
console.log("Source loaded successfull!");
137212
})
138213
.catch((error) => {
139214
console.error("An error occurred while loading the source!");
140215
});
216+
217+
function onUnmute(data) {
218+
console.log("Audio unmuted!");
219+
}
141220
</script>
142221

143222
<style>

‎LearningHub.Nhs.WebUI/Views/Shared/Tenant/LearningHub/_Layout.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<link rel="manifest" href="~/site.webmanifest.json">
2222
<link href="~/css/nhsuk/common.css" rel="stylesheet" asp-append-version="true" />
2323
<link href="~/css/nhsuk/layout.css" rel="stylesheet" asp-append-version="true" />
24-
<link href="~/css/mkplayer-ui.css" rel="stylesheet" asp-append-version="true" />
24+
@* <link href="~/css/mkplayer-ui.css" rel="stylesheet" asp-append-version="true" /> *@
2525
<noscript>
2626
<link href="~/css/no-js/no-js.css" rel="stylesheet" asp-append-version="true" />
2727
</noscript>

0 commit comments

Comments
 (0)