mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add playlist-sync and group-wait to SyncPlay

Browse source
This commit is contained in:
Ionut Andrei Oanca 2020-09-25 09:44:30 +02:00
parent 46a0382c0a
commit d8beb9909f
41 changed files with 3880 additions and 1125 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/controllers/playback/video/index.html
View file

@ -1,4 +1,10 @@
<div id="videoOsdPage" data-role="page" class="page libraryPage" data-backbutton="true">
<div class="syncPlayContainer">
<div id="syncPlayIcon" class="syncPlayIconCircle">
<span class="primary-icon material-icons play"></span>
<span class="secondary-icon material-icons play"></span>
</div>
</div>
<div class="upNextContainer hide"></div>
<div class="videoOsdBottom videoOsdBottom-maincontrols">
<div class="osdControls">

106
src/controllers/playback/video/index.js
View file

@ -1,4 +1,5 @@
import { playbackManager } from '../../../components/playback/playbackmanager';
import SyncPlay from 'SyncPlay';
import dom from '../../../scripts/dom';
import inputManager from '../../../scripts/inputManager';
import mouseManager from '../../../scripts/mouseManager';
@ -1568,6 +1569,111 @@ import { appRouter } from '../../../components/appRouter';
});
})();
}
// Register to SyncPlay playback events and show big animated icon
const showIcon = (action) => {
let primary_icon_name = '';
let secondary_icon_name = '';
let animation_class = 'oneShotPulse';
let iconVisibilityTime = 1500;
const syncPlayIcon = view.querySelector('#syncPlayIcon');
switch (action) {
case 'schedule-play':
primary_icon_name = 'sync spin';
secondary_icon_name = 'play_arrow centered';
animation_class = 'infinitePulse';
iconVisibilityTime = -1;
hideOsd();
break;
case 'unpause':
primary_icon_name = 'play_circle_outline';
break;
case 'pause':
primary_icon_name = 'pause_circle_outline';
showOsd();
break;
case 'seek':
primary_icon_name = 'update';
animation_class = 'infinitePulse';
iconVisibilityTime = -1;
break;
case 'buffering':
primary_icon_name = 'schedule';
animation_class = 'infinitePulse';
iconVisibilityTime = -1;
break;
case 'wait-pause':
primary_icon_name = 'schedule';
secondary_icon_name = 'pause shifted';
animation_class = 'infinitePulse';
iconVisibilityTime = -1;
break;
case 'wait-unpause':
primary_icon_name = 'schedule';
secondary_icon_name = 'play_arrow shifted';
animation_class = 'infinitePulse';
iconVisibilityTime = -1;
break;
default: {
syncPlayIcon.style.visibility = 'hidden';
return;
}
}
syncPlayIcon.setAttribute('class', 'syncPlayIconCircle ' + animation_class);
const primaryIcon = syncPlayIcon.querySelector('.primary-icon');
primaryIcon.setAttribute('class', 'primary-icon material-icons ' + primary_icon_name);
const secondaryIcon = syncPlayIcon.querySelector('.secondary-icon');
secondaryIcon.setAttribute('class', 'secondary-icon material-icons ' + secondary_icon_name);
const clone = syncPlayIcon.cloneNode(true);
clone.style.visibility = 'visible';
syncPlayIcon.parentNode.replaceChild(clone, syncPlayIcon);
if (iconVisibilityTime < 0) {
return;
}
setTimeout(() => {
clone.style.visibility = 'hidden';
}, iconVisibilityTime);
};
Events.on(SyncPlay.Manager, 'enabled', (event, enabled) => {
if (enabled) {
// SyncPlay enabled
} else {
const syncPlayIcon = view.querySelector('#syncPlayIcon');
syncPlayIcon.style.visibility = 'hidden';
}
});
Events.on(SyncPlay.Manager, 'notify-osd', (event, action) => {
showIcon(action);
});
Events.on(SyncPlay.Manager, 'group-state-update', (event, state, reason) => {
if (state === 'Playing' && reason === 'Unpause') {
showIcon('schedule-play');
} else if (state === 'Playing' && reason === 'Ready') {
showIcon('schedule-play');
} else if (state === 'Paused' && reason === 'Pause') {
showIcon('pause');
} else if (state === 'Paused' && reason === 'Ready') {
showIcon('clear');
} else if (state === 'Waiting' && reason === 'Seek') {
showIcon('seek');
} else if (state === 'Waiting' && reason === 'Buffer') {
showIcon('buffering');
} else if (state === 'Waiting' && reason === 'Pause') {
showIcon('wait-pause');
} else if (state === 'Waiting' && reason === 'Unpause') {
showIcon('wait-unpause');
}
});
}
/* eslint-enable indent */