Comments (2)
Twitch change html/css style of player controls panel.
Work variant of pip button is:
<div aria-describedby="78355cb0a0e295f75e3cdb8eb2ac41ca1" class="Layout-sc-nxg1ff-0 ScAttachedTooltipWrapper-sc-v8mg6d-0 gCVNER">
<button id="PiPer_button" class="ScCoreButton-sc-1qn4ixc-0 NUuwz ScButtonIcon-sc-o7ndmn-0 fCvKRl" aria-label="Open Picture in Picture mode" data-a-target="player-theatre-mode-button">
<div class="ScButtonIconFigure-sc-o7ndmn-1 fkBaPV">
<div class="ScIconLayout-sc-1bgeryd-0 dPgmNu">
<div class="ScAspectRatio-sc-1sw3lwy-1 dJaMsL tw-aspect">
<div class="ScAspectSpacer-sc-1sw3lwy-0 giUbvo"></div>
<img style="height: 100%; width: 100%; transform: scale(1);" src="safari-extension://FC1F6A6B-2021-42B9-B665-737D523BBDD5/1f3adad2/images/default.svg">
</div>
</div>
</div>
</button>
<div class="ScAttachedTooltip-sc-v8mg6d-1 bnTAft tw-tooltip" data-a-target="tw-tooltip-label" role="tooltip" id="78355cb0a0e295f75e3cdb8eb2ac41ca1" direction="top">Open Picture in Picture mode</div>
</div>
Twitch is now using some generated CSS styles with generated names and I don't know if it's possible to use the current styles in the extension 🤷♂️
EDIT1:
Simplest way is remove old styles and delete tooltip element:
<button id="PiPer_button" title="" class="">
<img style="height: 100%; width: 100%; transform: scale(0.7);" src="safari-extension://FC1F6A6B-2021-42B9-B665-737D523BBDD5/1f3adad2/images/default.svg">
</button>
In this case fix for twitch.js looks like:
import { getResource } from './../common.js'
import { getButton } from './../button.js'
import { videoPlayingPictureInPicture, togglePictureInPicture } from './../video.js'
export const domain = 'twitch';
export const resource = {
buttonClassName: '',
buttonDidAppear: function() {
// 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);
});
},
buttonInsertBefore: function(/** Element */ parent) {
return parent.lastChild;
},
buttonParent: function() {
return document.querySelector('.player-controls__right-control-group,.player-buttons-right');
},
buttonScale: 0.7,
captionElement: function() {
return document.querySelector('.player-captions-container');
},
videoElement: function() {
return document.querySelector('video[src]');
},
};
from piper.
Hi @amarcu5, are you planning support this extension in future?
from piper.
Related Issues (20)
- Keyboard Shortcut
- Twitch icon problem HOT 3
- Native Mac m1 support?
- Doesn't work with Netflix anymore
- Doesn't work with Netflix anymore :( HOT 1
- Removal from Chrome Web Store
- twitch problem its like gigantic! HOT 7
- Safari - Netflix HOT 1
- Picture in Picture Netflix
- Safari M1 Issues with YouTube HOT 2
- Doesnt work on netflix safari
- Netflix-Safari
- Doesn't work on twitch
- Icon does not appear on Amazon Prime
- iOS support
- Twitch Very Big Icon
- Dose Not Always Show Up
- not showing up on Hulu
- Not showing up on media.ccc.de
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from piper.