neoris/restreamer-ui-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add AirPlay support with silvermine videojs plugin

Browse Source
This commit is contained in:
Ingo Oppermann 2022-07-13 20:21:02 +02:00
parent 2b9a9a1207
commit 2ded21e988
No known key found for this signature in database
GPG Key ID: 2AB32426E9DD229E
11 changed files with 1372 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -2,6 +2,7 @@
#### v1.1.0 > v1.2.0
- Add AirPlay support with silvermine videojs plugin
- Add Chromecast support (thx badincite, [#10](https://github.com/datarhei/restreamer-ui/pull/10))
- Add stream distribution across multiple internal servers
- Add SRT settings

15
public/_player/videojs/dist/ic_airplay_white_24px.svg vendored Normal file
View File

@ -0,0 +1,15 @@
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M0 0h24v24H0V0z" id="a"/>
</defs>
<defs>
<path d="M0 0h24v24H0V0z" id="c"/>
</defs>
<clipPath id="b">
<use overflow="visible" xlink:href="#a"/>
</clipPath>
<clipPath clip-path="url(#b)" id="d">
<use overflow="visible" xlink:href="#c"/>
</clipPath>
<path clip-path="url(#d)" d="M6 22h12l-6-6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 623 B

1
public/_player/videojs/dist/videojs-airplay.min.css vendored Normal file
View File

@ -0,0 +1 @@
.vjs-airplay-button .vjs-icon-placeholder{background:url("ic_airplay_white_24px.svg") center center no-repeat;background-size:contain;display:inline-block;width:20px;height:20px}.vjs-airplay-button:hover{cursor:pointer}.vjs-airplay-button:hover .vjs-icon-placeholder{background-image:url("ic_airplay_white_24px.svg")}

1315
public/_player/videojs/dist/videojs-airplay.min.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

5
public/_player/videojs/files.txt
View File

@ -8,4 +8,7 @@ dist/videojs-license.min.css
dist/videojs-chromecast.min.js
dist/videojs-chromecast.min.css
dist/ic_cast_connected_white_24dp.png
dist/ic_cast_white_24dp.png
dist/ic_cast_white_24dp.png
dist/videojs-airplay.min.js
dist/videojs-airplay.min.css
dist/ic_airplay_white_24px.svg

10
public/_player/videojs/player.html
View File

@ -15,6 +15,9 @@
<link href="player/videojs/dist/video-js-skin.min.css" rel="stylesheet">
<link href="player/videojs/dist/videojs-overlay.min.css" rel="stylesheet">
<link href="player/videojs/dist/videojs-license.min.css" rel="stylesheet">
{{#if airplay}}
<link href="player/videojs/dist/videojs-airplay.min.css" rel="stylesheet">
{{/if}}
{{#if chromecast}}
<link href="player/videojs/dist/videojs-chromecast.min.css" rel="stylesheet">
{{/if}}
@ -26,6 +29,9 @@
<script src="player/videojs/dist/video.min.js"></script>
<script src="player/videojs/dist/videojs-overlay.min.js"></script>
<script src="player/videojs/dist/videojs-license.min.js"></script>
{{#if airplay}}
<script src='player/videojs/dist/videojs-airplay.min.js'></script>
{{/if}}
{{#if chromecast}}
<script src='player/videojs/dist/videojs-chromecast.min.js'></script>
<script src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'></script>
@ -87,6 +93,10 @@
config.plugins.chromecast = {};
}
if (playerConfig.airplay) {
config.plugins.airPlay = {};
}
var player = videojs('player', config);
player.ready(function() {
if(playerConfig.logo.image.length != 0) {

7
public/_playersite/index.html
View File

@ -44,6 +44,9 @@
<link href="player/videojs/dist/video-js-skin.min.css" rel="stylesheet">
<link href="player/videojs/dist/videojs-overlay.min.css" rel="stylesheet">
<link href="player/videojs/dist/videojs-license.min.css" rel="stylesheet">
{{#if airplay}}
<link href="player/videojs/dist/videojs-airplay.min.css" rel="stylesheet">
{{/if}}
{{#if chromecast}}
<link href="player/videojs/dist/videojs-chromecast.min.css" rel="stylesheet">
{{/if}}
@ -785,6 +788,9 @@
<script src="player/videojs/dist/video.min.js"></script>
<script src="player/videojs/dist/videojs-overlay.min.js"></script>
<script src="player/videojs/dist/videojs-license.min.js"></script>
{{#if airplay}}
<script src='player/videojs/dist/videojs-airplay.min.js'></script>
{{/if}}
{{#if chromecast}}
<script src='player/videojs/dist/videojs-chromecast.min.js'></script>
<script src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'></script>
@ -832,6 +838,7 @@
var statistics = convertBoolParam("stats", playerConfig.statistics);
var color = convertColorParam("color", playerConfig.color.buttons);
var chromecast = {{#if chromecast}}true{{else}}false{{/if}};
var airplay = {{#if airplay}}true{{else}}false{{/if}};
</script>
<script src="playersite/player.js"></script>

4
public/_playersite/videojs.js
View File

@ -18,6 +18,10 @@ if (chromecast) {
config.plugins.chromecast = {};
}
if (airplay) {
config.plugins.airPlay = {};
}
var player = videojs('player', config);
player.ready(function () {

4
src/utils/restreamer.js
View File

@ -1892,6 +1892,7 @@ class Restreamer {
mute: false,
statistics: false,
chromecast: false,
airplay: false,
color: {},
ga: {},
logo: {},
@ -1950,6 +1951,7 @@ class Restreamer {
width: 640,
height: 360,
chromecast: metadata.player.chromecast,
airplay: metadata.player.airplay,
};
// upload player.html
@ -2032,6 +2034,7 @@ class Restreamer {
share: true,
support: true,
chromecast: false,
airplay: false,
template: '!default',
templatename: '',
textcolor_title: 'rgba(255,255,255,1)',
@ -2114,6 +2117,7 @@ class Restreamer {
share: settings.share,
support: settings.support,
chromecast: settings.chromecast,
airplay: settings.airplay,
url: this.GetPlayersiteUrl(),
textcolor_title: settings.textcolor_title,
textcolor_default: settings.textcolor_default,

10
src/views/Playersite.js
View File

@ -98,7 +98,7 @@ export default function Playersite(props) {
const value = event.target.value;
const settings = $settings;
if (['playersite', 'header', 'share', 'support', 'chromecast'].includes(what)) {
if (['playersite', 'header', 'share', 'support', 'chromecast', 'airplay'].includes(what)) {
settings[what] = !settings[what];
} else {
settings[what] = value;
@ -428,6 +428,14 @@ export default function Playersite(props) {
onChange={handleChange('chromecast')}
/>
</Grid>
<Grid item xs={12}>
<Checkbox
label={<Trans>AirPlay</Trans>}
checked={$settings.airplay}
disabled={!$settings.playersite}
onChange={handleChange('airplay')}
/>
</Grid>
<Grid item xs={12}>
<Checkbox
label={<Trans>Support datarhei Restreamer</Trans>}

3
src/views/Publication/Player.js
View File

@ -118,7 +118,7 @@ export default function Edit(props) {
const settings = $settings;
if (section === '') {
if (['autoplay', 'mute', 'statistics', 'chromecast'].includes(what)) {
if (['autoplay', 'mute', 'statistics', 'chromecast', 'airplay'].includes(what)) {
settings[what] = !settings[what];
} else {
settings[what] = value;
@ -437,6 +437,7 @@ export default function Edit(props) {
<Checkbox label={<Trans>Autoplay</Trans>} checked={$settings.autoplay} onChange={handleChange('autoplay')} />
<Checkbox label={<Trans>Mute</Trans>} checked={$settings.mute} onChange={handleChange('mute')} />
<Checkbox label={<Trans>Chromecast</Trans>} checked={$settings.chromecast} onChange={handleChange('chromecast')} />
<Checkbox label={<Trans>AirPlay</Trans>} checked={$settings.airplay} onChange={handleChange('airplay')} />
</Grid>
</Grid>
</TabPanel>