Skip to content

Commit 2601fdf

Browse files
swapnamol-abrahamswapnamol-abraham
authored
Merge pull request #957 from TechnologyEnhancedLearning/Develop/Fixes-Td-5300-Landing-Page---Video-player-buttons-focus-right-to-left
TD-5300: Landing Page - Video player buttons focus right to left
2 parents 1a550e8 + 883b70c commit 2601fdf

File tree

2 files changed

+153
-121
lines changed

2 files changed

+153
-121
lines changed

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

Lines changed: 149 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@using LearningHub.Nhs.Models.Content
22
@model PageSectionDetailViewModel
33
@{
4-
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}";
4+
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}";
99
}
1010

1111
<script type="text/javascript" src="~/js/mkplayer.js" asp-append-version="true"></script>
@@ -55,130 +55,161 @@
5555

5656
<script type="text/javascript">
5757
58-
var model = @Json.Serialize(Model);
59-
let model_@Model.Id = model; // Create a new unique model
60-
61-
// 1. Grab the video container
62-
var videoContainer = document.getElementById("@($"{"videoContainer"}{Model.Id}")");
63-
64-
// 2. Prepare the player configuration
65-
var playerConfig = {
66-
key: "@mkPlayerLicence",
67-
ui: true,
68-
theme: "dark",
69-
playback: {
70-
muted: false,
71-
autoplay: false,
72-
preferredTech: [{ player: 'html5', streaming: 'hls' }]
73-
}
74-
};
75-
76-
// 3. Initialize the player with video container and player configuration
77-
var player = new mkplayer.MKPlayer(videoContainer, playerConfig);
78-
let player_@Model.Id = player; // Create a new unique player
79-
80-
// [BY] Commenting and leaving this code here for future reference : When we set UI:false, we need to manually add controls
81-
// -----------------------------------------------------------------------------------------------------------------------
82-
// player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
83-
// const videoElement = document.getElementById("@($"{"bitmovinplayer-video-videoContainer"}{Model.Id}")");
84-
// if (videoElement) {
85-
// videoElement.controls = true;
86-
87-
// // Check if captions available
88-
// if (model.videoAsset.closedCaptionsFile) {
89-
// const captionsInfo = model.videoAsset.closedCaptionsFile;
90-
// if (captionsInfo.filePath) {
91-
// const trackElement = document.createElement('track');
92-
// const srcPath = "/file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
93-
// trackElement.kind = 'captions'; // Or 'subtitles' or 'descriptions' depending on your track type
94-
// trackElement.label = captionsInfo.language || 'english';
95-
// trackElement.srclang = captionsInfo.language || 'en';
96-
// trackElement.src = srcPath;
97-
98-
// // Append the track to the video element
99-
// videoElement.appendChild(trackElement);
100-
// }
101-
// }
102-
// }
103-
// });
104-
// -----------------------------------------------------------------------------------------------------------------------
105-
106-
var url = model.videoAsset.azureMediaAsset.locatorUri;
107-
url = url.substring(0, url.lastIndexOf("manifest")) + "manifest(format=m3u8-cmaf,encryption=cbc)";
108-
109-
if (checkIfIphone()) {
110-
var token = model.videoAsset.azureMediaAsset.authenticationToken;
111-
url = '@requestURL' + "Media/MediaManifest?playBackUrl=" + url + "&token=" + token + "&origin=" + '@requestURL' + "&isLandingPage=" + true;
112-
}
113-
var subtitleTrack = null;
114-
if (model.videoAsset.azureMediaAsset && model.videoAsset.closedCaptionsFile) {
115-
const captionsInfo = model.videoAsset.closedCaptionsFile;
116-
var srcPath = "file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
117-
srcPath = '@requestURL' + srcPath;
118-
119-
subtitleTrack = {
120-
id: "@($"{"subtitle"}{Model.Id}")",
121-
lang: "en",
122-
label: "english",
123-
url: srcPath,
124-
kind: "subtitle"
125-
};
58+
var model = @Json.Serialize(Model);
59+
let model_@Model.Id = model; // Create a new unique model
60+
61+
// 1. Grab the video container
62+
var videoContainer = document.getElementById("@($"{"videoContainer"}{Model.Id}")");
63+
64+
// 2. Prepare the player configuration
65+
var playerConfig = {
66+
key: "@mkPlayerLicence",
67+
ui: true,
68+
theme: "dark",
69+
playback: {
70+
muted: false,
71+
autoplay: false,
72+
preferredTech: [{ player: 'html5', streaming: 'hls' }]
12673
}
127-
128-
var sourceConfig = {
129-
hls: url,
130-
subtitleTracks: [subtitleTrack],
131-
drm: {
132-
clearkey: {
133-
LA_URL: "HLS_AES",
134-
headers: {
135-
"Authorization": "Bearer=" + model.videoAsset.azureMediaAsset.authenticationToken
136-
}
137-
}
138-
}
74+
};
75+
76+
// 3. Initialize the player with video container and player configuration
77+
var player = new mkplayer.MKPlayer(videoContainer, playerConfig);
78+
let player_@Model.Id = player; // Create a new unique player
79+
80+
// [BY] Commenting and leaving this code here for future reference : When we set UI:false, we need to manually add controls
81+
// -----------------------------------------------------------------------------------------------------------------------
82+
// player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
83+
// const videoElement = document.getElementById("@($"{"bitmovinplayer-video-videoContainer"}{Model.Id}")");
84+
// if (videoElement) {
85+
// videoElement.controls = true;
86+
87+
// // Check if captions available
88+
// if (model.videoAsset.closedCaptionsFile) {
89+
// const captionsInfo = model.videoAsset.closedCaptionsFile;
90+
// if (captionsInfo.filePath) {
91+
// const trackElement = document.createElement('track');
92+
// const srcPath = "/file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
93+
// trackElement.kind = 'captions'; // Or 'subtitles' or 'descriptions' depending on your track type
94+
// trackElement.label = captionsInfo.language || 'english';
95+
// trackElement.srclang = captionsInfo.language || 'en';
96+
// trackElement.src = srcPath;
97+
98+
// // Append the track to the video element
99+
// videoElement.appendChild(trackElement);
100+
// }
101+
// }
102+
// }
103+
// });
104+
// -----------------------------------------------------------------------------------------------------------------------
105+
106+
var url = model.videoAsset.azureMediaAsset.locatorUri;
107+
url = url.substring(0, url.lastIndexOf("manifest")) + "manifest(format=m3u8-cmaf,encryption=cbc)";
108+
109+
if (checkIfIphone()) {
110+
var token = model.videoAsset.azureMediaAsset.authenticationToken;
111+
url = '@requestURL' + "Media/MediaManifest?playBackUrl=" + url + "&token=" + token + "&origin=" + '@requestURL' + "&isLandingPage=" + true;
112+
}
113+
var subtitleTrack = null;
114+
if (model.videoAsset.azureMediaAsset && model.videoAsset.closedCaptionsFile) {
115+
const captionsInfo = model.videoAsset.closedCaptionsFile;
116+
var srcPath = "file/download/" + captionsInfo.filePath + "/" + captionsInfo.fileName;
117+
srcPath = '@requestURL' + srcPath;
118+
119+
subtitleTrack = {
120+
id: "@($"{"subtitle"}{Model.Id}")",
121+
lang: "en",
122+
label: "english",
123+
url: srcPath,
124+
kind: "subtitle"
139125
};
140-
141-
player.load(sourceConfig)
142-
.then(() => {
143-
console.log("Source loaded successfull!");
144-
})
145-
.catch((error) => {
146-
console.error("An error occurred while loading the source!");
147-
});
148-
149-
function checkIfIphone() {
150-
const userAgent = navigator.userAgent || navigator.vendor;
151-
return /iPhone/i.test(userAgent);
126+
}
127+
128+
var sourceConfig = {
129+
hls: url,
130+
subtitleTracks: [subtitleTrack],
131+
drm: {
132+
clearkey: {
133+
LA_URL: "HLS_AES",
134+
headers: {
135+
"Authorization": "Bearer=" + model.videoAsset.azureMediaAsset.authenticationToken
136+
}
137+
}
152138
}
139+
};
140+
141+
player.load(sourceConfig)
142+
.then(() => {
143+
console.log("Source loaded successfull!");
144+
})
145+
.catch((error) => {
146+
console.error("An error occurred while loading the source!");
147+
});
148+
149+
function checkIfIphone() {
150+
const userAgent = navigator.userAgent || navigator.vendor;
151+
return /iPhone/i.test(userAgent);
152+
}
153+
154+
player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
155+
var contanierId = (model_@Model.Id).id;
156+
var uniquePlayer = (player_@Model.Id);
157+
buildControlbar(contanierId, uniquePlayer);
158+
})
153159
154-
player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
155-
var contanierId = (model_@Model.Id).id;
156-
var uniquePlayer = (player_@Model.Id);
157-
buildControlbar(contanierId, uniquePlayer);
158-
})
159-
160160
</script>
161161

162162
<style>
163163
164-
.video-container {
165-
height: 0;
166-
width: 100%;
167-
overflow: hidden;
168-
position: relative;
169-
padding-top: 56.25%; /* 16:9 aspect ratio */
170-
background-color: #000;
164+
.video-container {
165+
height: 0;
166+
width: 100%;
167+
overflow: hidden;
168+
position: relative;
169+
padding-top: 56.25%; /* 16:9 aspect ratio */
170+
background-color: #000;
171+
}
172+
173+
video {
174+
position: absolute;
175+
top: 0;
176+
left: 0;
177+
width: 100%;
178+
height: 100%;
179+
}
180+
181+
.bmpui-ui-controlbar .control-right {
182+
float: right;
183+
}
184+
185+
@@media (min-width: 225px) { /* Non standard for graceful */
186+
.controlmargin {
187+
margin-left: 200px;
188+
}
189+
}
190+
191+
@@media (min-width: 375px) { /* Non standard for graceful */
192+
.controlmargin {
193+
margin-left: 220px;
171194
}
195+
}
172196
173-
video {
174-
position: absolute;
175-
top: 0;
176-
left: 0;
177-
width: 100%;
178-
height: 100%;
197+
@@media (min-width: 450px) { /* Non standard for graceful */
198+
.controlmargin {
199+
margin-left: 220px;
179200
}
201+
}
180202
181-
.bmpui-ui-controlbar .control-right {
182-
float: right;
203+
@@media (max-width: 600px) {
204+
.controlmargin {
205+
margin-left: 220px;
183206
}
207+
}
208+
209+
@@media (min-width: 1024px) {
210+
.controlmargin {
211+
margin-left: 530px;
212+
}
213+
}
214+
184215
</style>

‎LearningHub.Nhs.WebUI/wwwroot/js/mkplayer-ui-custom.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,11 @@ function buildControlbar(id, player) {
4848
let buttons = titlebar.querySelectorAll('button');
4949

5050
// Reverse the button list and append each button to the controlbar
51-
Array.from(buttons).reverse().forEach(button => {
52-
if (button.textContent != "Mute") {
53-
button.classList.add('control-right'); // Add a class to align buttons to the right
51+
Array.from(buttons).forEach(button => {
52+
if (button.textContent == "Settings") {
53+
button.classList.add('controlmargin');
5454
}
55+
5556
controlbar.appendChild(button); // Append the button to the controlbar
5657
});
5758

0 commit comments

Comments
 (0)