Fixed Twitch support

Added support for new Twitch UI
This commit is contained in:
amarcu5 2019-11-13 18:12:50 +00:00
parent c470a77384
commit ccc4ec31a7
5 changed files with 18 additions and 26 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -5,44 +5,36 @@ import { videoPlayingPictureInPicture, togglePictureInPicture } from './../video
export const domain = 'twitch';
export const resource = {
buttonClassName: 'player-button',
buttonClassName: 'tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--overlay tw-inline-flex tw-relative tw-tooltip-wrapper',
buttonDidAppear: function() {
const neighbourButton = document.querySelector('.qa-fullscreen-button');
const neighbourTooltip = /** @type {HTMLElement} */ (neighbourButton.querySelector('.player-tip'));
// Add tooltip
const button = getButton();
const title = button.title;
const /** string */ neighbourTitle = neighbourTooltip.dataset['tip'];
button.title = '';
button.addEventListener('mouseover', function() {
neighbourTooltip.dataset['tip'] = title;
neighbourTooltip.style.display = 'block';
});
button.addEventListener('mouseout', function() {
neighbourTooltip.style.display = '';
neighbourTooltip.dataset['tip'] = neighbourTitle;
});
neighbourButton.addEventListener('click', function() {
const tooltip = /** @type {HTMLElement} */ (document.createElement('div'));
tooltip.className = 'tw-tooltip tw-tooltip--align-right tw-tooltip--up';
tooltip.appendChild(document.createTextNode(title));
button.appendChild(tooltip);
// Fix issues with fullscreen when activated while video playing Picture-in-Picture
const fullscreenButton = document.querySelector("[data-a-target='player-fullscreen-button']");
if (!fullscreenButton) return;
fullscreenButton.addEventListener('click', function() {
const video = /** @type {?HTMLVideoElement} */ (getResource().videoElement());
if (videoPlayingPictureInPicture(video)) togglePictureInPicture(video);
});
neighbourButton.style.order = 2;
// Ensure "Watch on Twitch" button is the rightmost button
const twitchButton = document.querySelector('.qa-watch-twitch-button');
if (twitchButton) twitchButton.style.order = 3;
},
buttonHoverStyle: /** CSS */ (`
filter: brightness(50%) sepia(1) hue-rotate(219deg) saturate(117%) brightness(112%);
`),
buttonInsertBefore: function(/** Element */ parent) {
return parent.lastChild;
},
buttonParent: function() {
return document.querySelector('.player-buttons-right');
return document.querySelector('.player-controls__right-control-group,.player-buttons-right');
},
buttonScale: 0.8,
buttonStyle: /** CSS */ (`order: 1`),
captionElement: function() {
return document.querySelector('.player-captions-container');
},
videoElement: function() {
return document.querySelector('.player-video video');
return document.querySelector('video[src]');
},
};

View File

@ -8,9 +8,9 @@
<key>CFBundleIdentifier</key>
<string>com.amarcus.safari.piper</string>
<key>CFBundleShortVersionString</key>
<string>1.0.3</string>
<string>1.0.4</string>
<key>CFBundleVersion</key>
<string>222</string>
<string>223</string>
<key>Developer Identifier</key>
<string>BQ6Q24MF9X</string>
<key>URL</key>