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 domain = 'twitch';
export const resource = { 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() { buttonDidAppear: function() {
const neighbourButton = document.querySelector('.qa-fullscreen-button'); // Add tooltip
const neighbourTooltip = /** @type {HTMLElement} */ (neighbourButton.querySelector('.player-tip'));
const button = getButton(); const button = getButton();
const title = button.title; const title = button.title;
const /** string */ neighbourTitle = neighbourTooltip.dataset['tip'];
button.title = ''; button.title = '';
button.addEventListener('mouseover', function() { const tooltip = /** @type {HTMLElement} */ (document.createElement('div'));
neighbourTooltip.dataset['tip'] = title; tooltip.className = 'tw-tooltip tw-tooltip--align-right tw-tooltip--up';
neighbourTooltip.style.display = 'block'; tooltip.appendChild(document.createTextNode(title));
}); button.appendChild(tooltip);
button.addEventListener('mouseout', function() {
neighbourTooltip.style.display = ''; // Fix issues with fullscreen when activated while video playing Picture-in-Picture
neighbourTooltip.dataset['tip'] = neighbourTitle; const fullscreenButton = document.querySelector("[data-a-target='player-fullscreen-button']");
}); if (!fullscreenButton) return;
neighbourButton.addEventListener('click', function() { fullscreenButton.addEventListener('click', function() {
const video = /** @type {?HTMLVideoElement} */ (getResource().videoElement()); const video = /** @type {?HTMLVideoElement} */ (getResource().videoElement());
if (videoPlayingPictureInPicture(video)) togglePictureInPicture(video); 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 */ (` buttonInsertBefore: function(/** Element */ parent) {
filter: brightness(50%) sepia(1) hue-rotate(219deg) saturate(117%) brightness(112%); return parent.lastChild;
`), },
buttonParent: function() { buttonParent: function() {
return document.querySelector('.player-buttons-right'); return document.querySelector('.player-controls__right-control-group,.player-buttons-right');
}, },
buttonScale: 0.8, buttonScale: 0.8,
buttonStyle: /** CSS */ (`order: 1`),
captionElement: function() { captionElement: function() {
return document.querySelector('.player-captions-container'); return document.querySelector('.player-captions-container');
}, },
videoElement: function() { videoElement: function() {
return document.querySelector('.player-video video'); return document.querySelector('video[src]');
}, },
}; };

View File

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