mirror of
https://github.com/gosticks/PiPer.git
synced 2025-10-16 11:55:42 +00:00
Fixed Twitch support
Added support for new Twitch UI
This commit is contained in:
parent
c470a77384
commit
ccc4ec31a7
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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]');
|
||||
},
|
||||
};
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user