Skip to content

Commit

Permalink
More web content improvements (#2562)
Browse files Browse the repository at this point in the history 
* Fix flickr feeds

* Removed discontinued feeds

* Use secure connections

* Apply fixes to internal copy

* Added support for YouTube channel URLs directly, instead of just feed URLs

* Changes:
- Added automatic names to feeds in the GUI
- Loading states to the web content panel
- Fixed peakaboo when saving web content

* Update SharedContentTab.java

* Allow to set names for web streams via GUI, and bugfixes

* Lint

* Fixed editing names

* Fixed NPE on web streams without thumbnails on the web interface

* Lint

* Fix logging of image conversion

* Fixed mp3 audio streams on web interface

* Fix error and improve logo display

Co-authored-by: Libor Vala <liborvala@seznam.cz>
  • Loading branch information
@SubJunk @valib
SubJunk and valib committed Jul 21, 2021
1 parent 19d35a5 commit 5bbee2e
Show file tree
Hide file tree
Showing 12 changed files with 432 additions and 199 deletions.
20 changes: 10 additions & 10 deletions src/main/external-resources/WEB.conf
View file
Expand Up @@ -10,32 +10,29 @@
# #
# Format for feeds: #
# #
# type.folders,separated,by,commas=URL #
# type.folders,separated,by,commas=URL,,,name #
# #
# Format for streams: #
# #
# type.folders,separated,by,commas=name for audio/video stream,URL,optional thumbnail URL #
# type.folders,separated,by,commas=name,URL,optional thumbnail URL #
# #
##########################################################################################################

# image feeds
imagefeed.Web,Pictures=http://api.flickr.com/services/feeds/photos_public.gne?format=rss2
imagefeed.Web,Pictures=http://api.flickr.com/services/feeds/photos_public.gne?id=39453068@N05&format=rss2
imagefeed.Web,Pictures=http://api.flickr.com/services/feeds/photos_public.gne?id=14362684@N08&format=rss2
imagefeed.Web,Pictures=http://picasaweb.google.fr/data/feed/base/user/nefuisalbum/albumid/5218433104757705489?alt=rss&kind=photo&hl=en_US
imagefeed.Web,Pictures=http://picasaweb.google.com/data/feed/base/user/FenderStratRocker?alt=rss&kind=album&hl=en_US&access=public
imagefeed.Web,Pictures=https://api.flickr.com/services/feeds/photos_public.gne?format=rss2
imagefeed.Web,Pictures=https://api.flickr.com/services/feeds/photos_public.gne?id=39453068@N05&format=rss2
imagefeed.Web,Pictures=https://api.flickr.com/services/feeds/photos_public.gne?id=14362684@N08&format=rss2

# audio feeds
audiofeed.Web,Podcasts=https://rss.art19.com/caliphate
audiofeed.Web,Podcasts=https://www.nasa.gov/rss/dyn/Gravity-Assist.rss
audiofeed.Web,Podcasts=http://podcasts.joerogan.net/feed
audiofeed.Web,Podcasts=http://wakingup.libsyn.com/rss
audiofeed.Web,Podcasts=https://wakingup.libsyn.com/rss
audiofeed.Web,Podcasts=https://rss.art19.com/wolverine-the-long-night

# video feeds
videofeed.Web,Vodcasts=http://feeds.feedburner.com/tedtalks_video
videofeed.Web,Vodcasts=https://feeds.feedburner.com/tedtalks_video
videofeed.Web,Vodcasts=https://www.nasa.gov/rss/dyn/nasax_vodcast.rss
videofeed.Web,Vodcasts=https://www.unicef.org/rss/unicef_television_vodcast.xml
videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UC0PEAMcRK7Mnn2G1bCBXOWQ
videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UCccjdJEay2hpb5scz61zY6Q
videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UCOiUKJ6lMU3yHbVNtNXJyfw
Expand All @@ -44,6 +41,9 @@ videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_
videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UC8-Th83bH_thdKZDJCrn88g
videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UCzRBkt4a2hy6HObM3cl-x7g

# audio streams
audiostream.Web,Radio=RNZ,http://radionz-ice.streamguys.com/national.mp3,https://www.rnz.co.nz/assets/cms_uploads/000/000/159/RNZ_logo-Te-Reo-NEG-500.png

# video streams
# videostream.Web,TV=France 24,mms://stream1.france24.yacast.net/f24_liveen,http://www.france24.com/en/sites/france24.com.en/themes/france24/logo-fr.png
# videostream.Web,TV=BFM TV (French TV),mms://vipmms9.yacast.net/bfm_bfmtv,http://upload.wikimedia.org/wikipedia/en/6/62/BFMTV.png
Expand Down
161 changes: 88 additions & 73 deletions src/main/external-resources/web/play.html
View file
Expand Up @@ -17,8 +17,10 @@
<link rel="stylesheet" href="/files/util/remoteui.css" type="text/css" media="screen">
<link rel="stylesheet" href="/files/util/fontawesome/css/all.min.css" type="text/css">

<link href="/files/util/video-js/video-js.min.css" type="text/css" rel="stylesheet">
<script src="/files/util/video-js/video.min.js"></script>
{{^isNativeAudio}}
<link href="/files/util/video-js/video-js.min.css" type="text/css" rel="stylesheet">
<script src="/files/util/video-js/video.min.js"></script>
{{/isNativeAudio}}

<link rel="stylesheet" href="/files/web.css" type="text/css" media="screen">
<link rel="stylesheet" href="/files/web-narrow.css" type="text/css" media="screen and (max-width: 1080px)">
Expand Down Expand Up @@ -67,21 +69,31 @@
{{^isVideo}}
<link rel="stylesheet" href="/files/util/flipper.css" type="text/css" media="screen">
{{/isVideo}}
<{{mediaType}} id="player" class="video-js vjs-default-skin vjs-fluid vjs-big-play-centered{{^isVideo}} full-card card{{/isVideo}}" controls {{auto}} fullscreen width="{{width}}" height="{{height}}"
data-setup='{ "html5" : { "nativeTextTracks" : true } }'
poster="/thumb/{{id1}}">

<{{mediaType}}
id="player"
class="video-js vjs-default-skin vjs-fluid vjs-big-play-centered{{^isVideo}}{{^isNativeAudio}} full-card card{{/isNativeAudio}}{{/isVideo}}"
controls
{{auto}}
fullscreen
{{^isNativeAudio}}width="{{width}}" height="{{height}}" {{/isNativeAudio}}
data-setup='{ "html5" : { "nativeTextTracks" : true } }'
poster="/thumb/{{id1}}"
>
<source src="/media/{{id1}}" type="{{mime}}">
{{#sub}}
<track kind="captions" src="/files/{{this}}" default>
{{/sub}}
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
{{#sub}}
<track kind="captions" src="/files/{{this}}" default>
{{/sub}}
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</{{mediaType}}>
{{^isVideo}}
<div class="well {{^isVideo}}full-card{{/isVideo}}">
<h2>{{name}}</h2>
{{#isNativeAudio}}
<img id="poster" src="/thumb/{{id1}}" style="max-width:100%;" />
{{/isNativeAudio}}
</div>
{{/isVideo}}
{{^isNativeAudio}}
<div id="toolbar" class=" {{^isVideo}}full-card{{/isVideo}}">
<button id="prev" onclick="prev()"{{prevAttr}} type="button" class="btn btn-sm btn-playbar"><span class="icon-player-prev"></span></button>
<button id="play" onclick="play()" type="button" class="btn btn-sm btn-playbar"><span class="icon-player-play"></span></button>
Expand All @@ -96,6 +108,7 @@ <h2>{{name}}</h2>
<a href="/raw/{{id1}}" target="_blank" download="{{name}}" id="DownloadLink" title="Download this {{mediaType}}" class="btn btn-sm btn-playbar"><span class="fa fa-download"></span></a>
<button id="fullscreen" onclick="GoInFullscreen(videojs('player'));" title="Fullscreen Mode" class="btn btn-sm btn-playbar"><span class="icon-player-size-fullscreen"></span></button>
</div>
{{/isNativeAudio}}
</div>
{{/isVideoWithAPIData}}

Expand All @@ -112,14 +125,14 @@ <h2>{{name}}</h2>
<link rel="stylesheet" href="/files/util/flipper.css" type="text/css" media="screen">
{{/isVideo}}
<{{mediaType}} id="player" class="video-js vjs-default-skin vjs-fluid vjs-big-play-centered{{^isVideo}} full-card card{{/isVideo}}" controls {{auto}} fullscreen width="{{width}}" height="{{height}}"
data-setup='{ "html5" : { "nativeTextTracks" : true } }'
poster="/thumb/{{id1}}">

data-setup='{ "html5" : { "nativeTextTracks" : true } }'
poster="/thumb/{{id1}}"
>
<source src="/media/{{id1}}" type="{{mime}}">
{{#sub}}
<track kind="captions" src="/files/{{this}}" default>
{{/sub}}
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
{{#sub}}
<track kind="captions" src="/files/{{this}}" default>
{{/sub}}
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</{{mediaType}}>
<script type="text/javascript">
if (poster) {
Expand All @@ -128,20 +141,20 @@ <h2>{{name}}</h2>
}
</script>
{{^isVideo}}
<div class="well {{^isVideo}}full-card{{/isVideo}}">
<h2>{{name}}</h2>
</div>
<div class="well full-card">
<h2>{{name}}</h2>
</div>
{{/isVideo}}
<div id="toolbar" class=" {{^isVideo}}full-card{{/isVideo}}">
<button id="prev" onclick="prev()"{{prevAttr}} type="button" class="btn btn-sm btn-playbar"><span class="icon-player-prev"></span></button>
<button id="play" onclick="play()" type="button" class="btn btn-sm btn-playbar"><span class="icon-player-play"></span></button>
<button id="pause" onclick="pause()" type="button" class="btn btn-sm btn-playbar"><span class="icon-player-pause"></span></button>
<button id="next" onclick="next()"{{nextAttr}} type="button" class="btn btn-sm btn-playbar"><span class="icon-player-next"></span></button>
{{#plsSign}}
<button id="playlist" title="{{plsAttr}}" onclick="umsAjax('/playlist/{{plsOp}}/{{id1}}', false);return false;" type="button" class="btn btn-sm btn-playbar">{{plsSign}}</button>
<button id="playlist" title="{{plsAttr}}" onclick="umsAjax('/playlist/{{plsOp}}/{{id1}}', false);return false;" type="button" class="btn btn-sm btn-playbar">{{plsSign}}</button>
{{/plsSign}}
{{#isVideo}}
<button id="flash" onclick="flash()" title="Switch to flash player" type="button" class="btn btn-sm btn-playbar"><span>Flash</span></button>
<button id="flash" onclick="flash()" title="Switch to flash player" type="button" class="btn btn-sm btn-playbar"><span>Flash</span></button>
{{/isVideo}}
<a href="/raw/{{id1}}" target="_blank" download="{{name}}" id="DownloadLink" title="Download this {{mediaType}}" class="btn btn-sm btn-playbar"><span class="fa fa-download"></span></a>
<button id="fullscreen" onclick="GoInFullscreen(videojs('player'));" title="Fullscreen Mode" class="btn btn-sm btn-playbar"><span class="icon-player-size-fullscreen"></span></button>
Expand All @@ -168,62 +181,64 @@ <h1>{{name}}</h1>
{{/isVideoWithAPIData}}
</div>
</div>
<script>
var state = {};
var player = document.getElementById('player');
{{^isNativeAudio}}
<script>
var state = {};
var player = document.getElementById('player');

function status(k, v, wait) {
//console.log('status '+JSON.stringify(arguments));
state[k] = v;
if (! wait) {
$.post('/playerstatus/', JSON.stringify(state));
function status(k, v, wait) {
//console.log('status '+JSON.stringify(arguments));
state[k] = v;
if (! wait) {
$.post('/playerstatus/', JSON.stringify(state));
}
}
}

function volumeStatus() {
status('mute', player.muted ? '1' : '0', true);
status('volume', (player.volume * 100).toFixed(0));
}
function volumeStatus() {
status('mute', player.muted ? '1' : '0', true);
status('volume', (player.volume * 100).toFixed(0));
}

player.addEventListener('playing', function(){status('playback', 'PLAYING');});
player.addEventListener('play', function(){status('playback', 'PLAYING');});
player.addEventListener('pause', function(){status('playback', 'PAUSED');});
player.addEventListener('canplay', function(){status('playback', 'STOPPED');});
player.addEventListener('ended', function(){status('playback', 'STOPPED');});
player.addEventListener('error', function(){status('playback', 'STOPPED');});
player.addEventListener('timeupdate', function(){status('position', player.currentTime.toFixed(0));});
player.addEventListener('volumechange', volumeStatus);
{{#autoContinue}}
player.addEventListener('ended', next, false);
{{/autoContinue}}
window.onbeforeunload = function(){status('playback','STOPPED');}
// Send initial status
volumeStatus();
player.addEventListener('playing', function(){status('playback', 'PLAYING');});
player.addEventListener('play', function(){status('playback', 'PLAYING');});
player.addEventListener('pause', function(){status('playback', 'PAUSED');});
player.addEventListener('canplay', function(){status('playback', 'STOPPED');});
player.addEventListener('ended', function(){status('playback', 'STOPPED');});
player.addEventListener('error', function(){status('playback', 'STOPPED');});
player.addEventListener('timeupdate', function(){status('position', player.currentTime.toFixed(0));});
player.addEventListener('volumechange', volumeStatus);
{{#autoContinue}}
player.addEventListener('ended', next, false);
{{/autoContinue}}
window.onbeforeunload = function(){status('playback','STOPPED');}
// Send initial status
volumeStatus();

{{#push}}
function control(op, arg) {
//console.log('control '+JSON.stringify(arguments));
var player = document.getElementById('player');
switch (op) {
case 'play':
player.play();
break;
case 'pause':
player.pause(!player.paused);
break;
case 'stop':
player.pause();
break;
case 'setvolume':
player.volume = arg/100;
break;
case 'mute':
player.muted = !player.muted;
break;
}
}
{{/push}}
</script>
{{#push}}
function control(op, arg) {
//console.log('control '+JSON.stringify(arguments));
var player = document.getElementById('player');
switch (op) {
case 'play':
player.play();
break;
case 'pause':
player.pause(!player.paused);
break;
case 'stop':
player.pause();
break;
case 'setvolume':
player.volume = arg/100;
break;
case 'mute':
player.muted = !player.muted;
break;
}
}
{{/push}}
</script>
{{/isNativeAudio}}
<input type="hidden" class="jQKeyboard" name="dummy">
<script src="/files/util/fontawesome/js/all.min.js"></script>
</body>
Expand Down
20 changes: 10 additions & 10 deletions src/main/java/net/pms/configuration/PmsConfiguration.java
View file
Expand Up @@ -5008,11 +5008,11 @@ public List<String> getWebConfigurationFileHeader() {
"# #",
"# Format for feeds: #",
"# #",
"# type.folders,separated,by,commas=URL #",
"# type.folders,separated,by,commas=URL,,,name #",
"# #",
"# Format for streams: #",
"# #",
"# type.folders,separated,by,commas=name for audio/video stream,URL,optional thumbnail URL #",
"# type.folders,separated,by,commas=name,URL,optional thumbnail URL #",
"# #",
"##########################################################################################################"
);
Expand All @@ -5024,23 +5024,20 @@ public void writeWebConfigurationFile() {
defaultWebConfContents.addAll(Arrays.asList(
"",
"# image feeds",
"imagefeed.Web,Pictures=http://api.flickr.com/services/feeds/photos_public.gne?format=rss2",
"imagefeed.Web,Pictures=http://api.flickr.com/services/feeds/photos_public.gne?id=39453068@N05&format=rss2",
"imagefeed.Web,Pictures=http://api.flickr.com/services/feeds/photos_public.gne?id=14362684@N08&format=rss2",
"imagefeed.Web,Pictures=http://picasaweb.google.fr/data/feed/base/user/nefuisalbum/albumid/5218433104757705489?alt=rss&kind=photo&hl=en_US",
"imagefeed.Web,Pictures=http://picasaweb.google.com/data/feed/base/user/FenderStratRocker?alt=rss&kind=album&hl=en_US&access=public",
"imagefeed.Web,Pictures=https://api.flickr.com/services/feeds/photos_public.gne?format=rss2",
"imagefeed.Web,Pictures=https://api.flickr.com/services/feeds/photos_public.gne?id=39453068@N05&format=rss2",
"imagefeed.Web,Pictures=https://api.flickr.com/services/feeds/photos_public.gne?id=14362684@N08&format=rss2",
"",
"# audio feeds",
"audiofeed.Web,Podcasts=https://rss.art19.com/caliphate",
"audiofeed.Web,Podcasts=https://www.nasa.gov/rss/dyn/Gravity-Assist.rss",
"audiofeed.Web,Podcasts=http://podcasts.joerogan.net/feed",
"audiofeed.Web,Podcasts=http://wakingup.libsyn.com/rss",
"audiofeed.Web,Podcasts=https://wakingup.libsyn.com/rss",
"audiofeed.Web,Podcasts=https://rss.art19.com/wolverine-the-long-night",
"",
"# video feeds",
"videofeed.Web,Vodcasts=http://feeds.feedburner.com/tedtalks_video",
"videofeed.Web,Vodcasts=https://feeds.feedburner.com/tedtalks_video",
"videofeed.Web,Vodcasts=https://www.nasa.gov/rss/dyn/nasax_vodcast.rss",
"videofeed.Web,Vodcasts=https://www.unicef.org/rss/unicef_television_vodcast.xml",
"videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UC0PEAMcRK7Mnn2G1bCBXOWQ",
"videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UCccjdJEay2hpb5scz61zY6Q",
"videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UCOiUKJ6lMU3yHbVNtNXJyfw",
Expand All @@ -5049,6 +5046,9 @@ public void writeWebConfigurationFile() {
"videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UC8-Th83bH_thdKZDJCrn88g",
"videofeed.Web,YouTube Channels=https://www.youtube.com/feeds/videos.xml?channel_id=UCzRBkt4a2hy6HObM3cl-x7g",
"",
"# audio streams",
"audiostream.Web,Radio=RNZ,http://radionz-ice.streamguys.com/national.mp3,https://www.rnz.co.nz/assets/cms_uploads/000/000/159/RNZ_logo-Te-Reo-NEG-500.png",
"",
"# video streams",
"# videostream.Web,TV=France 24,mms://stream1.france24.yacast.net/f24_liveen,http://www.france24.com/en/sites/france24.com.en/themes/france24/logo-fr.png",
"# videostream.Web,TV=BFM TV (French TV),mms://vipmms9.yacast.net/bfm_bfmtv,http://upload.wikimedia.org/wikipedia/en/6/62/BFMTV.png",
Expand Down

0 comments on commit 5bbee2e

Please sign in to comment.