Skip to content

Commit 4a65de3

Browse files
fquirinfquirin
committed
improved mp widget and Youtube URL parsing
1 parent aa29e29 commit 4a65de3

File tree

2 files changed

+51
-17
lines changed

2 files changed

+51
-17
lines changed

‎www/scripts/sepiaFW.ui.cards.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,15 @@ function sepiaFW_build_ui_cards(){
6565
if (!url) return false;
6666
var testUrl = url.toLowerCase().trim();
6767
//YouTube
68-
if (Cards.canEmbedYouTube && testUrl.indexOf("https://www.youtube") == 0){
69-
var testUrl = testUrl.replace("youtube-nocookie.com", "youtube.com"); //easier for testing
70-
if (testUrl.indexOf("https://www.youtube.com") == 0 && (
71-
testUrl.indexOf("/embed") == 23
72-
|| testUrl.indexOf("/playlist") == 23
68+
if (Cards.canEmbedYouTube && !!testUrl.match(/https:\/\/(www\.|m\.|)(youtube|youtube-nocookie|youtu)\.(com|be)/)){
69+
var testUrl = testUrl //easier for testing
70+
.replace("www.", "")
71+
.replace("youtube-nocookie", "youtube")
72+
.replace("m.youtube", "youtube")
73+
.replace("youtu.be/", "youtube.com/embed/");
74+
if (testUrl.indexOf("https://youtube.com") == 0 && (
75+
testUrl.indexOf("/embed") == 19
76+
|| testUrl.indexOf("/playlist") == 19
7377
|| testUrl.indexOf("listType=playlist") > 0
7478
|| !!testUrl.match(/(&|\?)v=.+/)
7579
)){

‎www/xtensions/custom-data/widgets/mp-youtube.html‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,16 @@
4343
background: #000;
4444
color: #fff;
4545
}
46+
#player-info-msg {
47+
width: 100%;
48+
height: auto;
49+
padding: 6px;
50+
background: #000;
51+
color: #fff;
52+
display: flex;
53+
justify-content: center;
54+
align-items: center;
55+
}
4656
</style>
4757
</head>
4858
<body >
@@ -52,6 +62,7 @@
5262
height="280"
5363
allowtransparency="true" allow="autoplay *; encrypted-media *;"
5464
></iframe>
65+
<div id="player-info-msg"></div>
5566
</div>
5667
<!-- JS -->
5768
<script type="text/javascript">
@@ -114,6 +125,13 @@
114125
if (skinId != undefined){
115126
document.body.classList.add("skin-id-" + skinId);
116127
}
128+
function updateSize(){
129+
postProperties({
130+
size: {
131+
height: (cardBody.getBoundingClientRect().height + "px")
132+
}
133+
});
134+
}
117135

118136
//handle events
119137
function eventHandler(ev){
@@ -143,6 +161,7 @@
143161

144162
var cardBody = document.getElementById("card-body");
145163
var playerFrame = document.getElementById("audio-player");
164+
var playerInfoMsgEle = document.getElementById("player-info-msg");
146165

147166
var autoplay = false;
148167
var restoreSettings = {};
@@ -228,37 +247,53 @@
228247
}else if (mr.uri){
229248
ytUrl = mr.uri;
230249
}
250+
var errorMessage = "";
231251
if (ytUrl){
232252
//handle a bunch of URLs
233253
if (ytUrl.indexOf("search_query=") > 0){
234254
//will fail due to iframe restrictions, e.g.: https://www.youtube.com/results?search_query=purple+haze%2C+jimi+hendrix
235255
//TODO: add error message
236256
ytUrl = undefined;
237-
playerFrame.src = "";
257+
playerFrame.src = "about:blank";
258+
errorMessage = "Embedded search requires API now :-(";
238259
}else if (!!ytUrl.match(/(&|\?)v=.+/)){
239260
//https://www.youtube.com/watch?v=H-RBJNqdnoM&list=RDEMrHVi-mxOgy0ZqOdSlMHqjA&start_radio=1
240261
var videoId = ytUrl.replace(/.*(&|\?)v=/, "").replace(/&.*/, "").trim();
241262
ytUrl = addYouTubeEmbedUrlParameters(baseUrl + videoId);
242263
playerFrame.src = ytUrl;
243-
}else if ((!!ytUrl.match(/(&|\?)listType=playlist/) || ytUrl.indexOf("/playlist?") >= 23) && !!ytUrl.match(/(&|\?)list=.+/)){
264+
}else if ((!!ytUrl.match(/(&|\?)listType=playlist/) || ytUrl.indexOf("/playlist?") >= 10) && !!ytUrl.match(/(&|\?)list=.+/)){
244265
//https://www.youtube.com/embed?listType=playlist&list=OLAK5uy_nMLnwHRhSOAO6sO7LmFRkp21RATGG6mT8&start_radio=1
245266
//https://www.youtube.com/playlist?list=OLAK5uy_nMLnwHRhSOAO6sO7LmFRkp21RATGG6mT8
246267
var playlistId = ytUrl.replace(/.*(&|\?)list=/, "").replace(/&.*/, "").trim();
247268
ytUrl = addYouTubeEmbedUrlParameters(baseUrl) + "&listType=playlist&list=" + playlistId;
248269
playerFrame.src = ytUrl;
249270
}else{
250271
//https://www.youtube.com/embed/dkNfNR1WYMY
251-
//https://www.youtube-nocookie.com/embed/dkNfNR1WYMY
252-
ytUrl = addYouTubeEmbedUrlParameters(ytUrl, ytUrlPlaylistParam);
272+
//https://www.youtube-nocookie.com/embed/dkNfNR1WYMY //has control bug :-(
273+
//https://youtu.be/tAGnKpE4NCI
274+
//https://m.youtube.com/embed/tAGnKpE4NCI
275+
ytUrl = addYouTubeEmbedUrlParameters(
276+
ytUrl.replace(/https:\/\/.*?\/(embed\/|)/, "https://www.youtube.com/embed/"), ytUrlPlaylistParam);
253277
playerFrame.src = ytUrl;
254278
}
255279
youTubeLastUrlRequest = ytUrl;
280+
}else{
281+
playerFrame.src = "about:blank";
256282
}
257-
if (!playerFrame.src){
283+
if (!ytUrl){
258284
//Error: NoMediaMatch
259285
postError("NoMediaMatch", "Found no video to play", 2);
286+
playerInfoMsgEle.textContent = errorMessage || "No Media";
287+
playerInfoMsgEle.style.display = "";
288+
playerFrame.style.display = "none";
289+
updateSize();
260290
}else{
261291
//console.error("YouTube URL:", playerFrame.src); //DEBUG
292+
if (playerFrame.style.display == "none"){
293+
playerInfoMsgEle.style.display = "none";
294+
playerFrame.style.display = "";
295+
updateSize();
296+
}
262297
}
263298
//Backup settings
264299
restoreSettings.src = playerFrame.src;
@@ -269,8 +304,7 @@
269304
//make sure we have correct URL parameters for embedded link
270305
function addYouTubeEmbedUrlParameters(url, add){
271306
var u = (
272-
url.replace("youtube-nocookie.com", "youtube.com") //for controls bug :-(
273-
.replace(/\?.*/, "").trim()
307+
url.replace(/\?.*/, "").trim()
274308
+ "?autoplay=" + (autoplay? 1 : 0)
275309
+ "&enablejsapi=1&playsinline=1&iv_load_policy=3&fs=1"
276310
);
@@ -373,11 +407,7 @@
373407

374408
//ready
375409
setTimeout(function(){
376-
postProperties({
377-
size: {
378-
height: (cardBody.getBoundingClientRect().height + "px")
379-
}
380-
});
410+
updateSize();
381411
postState(1, {});
382412
}, 300);
383413
</script>

0 commit comments

Comments
 (0)