Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 12:24:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add forward seeking buttons to jwplayer (#1973)

Browse Source 
* Add forward seeking buttons to jwplayer

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
This commit is contained in:
Por Nulus
2021-11-19 02:59:02 +01:00
committed by GitHub
parent 92a5d96d3b
commit 9a76b4cf11
2 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/v2.5/src/components/Changelog/versions/v0120.md
View File

@@ -1,3 +1,6 @@
### ✨ New Features
* Add forward jump 10 second button to video player. ([#1973](https://github.com/stashapp/stash/pull/1973))
### 🎨 Improvements
* Added plugin hook for Tag merge operation. ([#2010](https://github.com/stashapp/stash/pull/2010))

68
ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
View File

@@ -7,6 +7,24 @@ import { ConfigurationContext } from "src/hooks/Config";
import { ScenePlayerScrubber } from "./ScenePlayerScrubber";
import { Interactive } from "../../utils/interactive";
/*
fast-forward svg derived from https://github.com/jwplayer/jwplayer/blob/master/src/assets/SVG/rewind-10.svg
Flipped horizontally, then flipped '10' numerals horizontally.
Creative Common License: https://github.com/jwplayer/jwplayer/blob/master/LICENSE
*/
const ffSVG = `
<svg xmlns="http://www.w3.org/2000/svg" class="jw-svg-icon jw-svg-icon-rewind" viewBox="0 0 240 240" focusable="false">
<path d="M185,135.6c-3.7-6.3-10.4-10.3-17.7-10.6c-7.3,0.3-14,4.3-17.7,10.6c-8.6,14.2-8.6,32.1,0,46.3c3.7,6.3,10.4,10.3,17.7,10.6
c7.3-0.3,14-4.3,17.7-10.6C193.6,167.6,193.6,149.8,185,135.6z M167.3,182.8c-7.8,0-14.4-11-14.4-24.1s6.6-24.1,14.4-24.1
s14.4,11,14.4,24.1S175.2,182.8,167.3,182.8z M123.9,192.5v-51l-4.8,4.8l-6.8-6.8l13-13c1.9-1.9,4.9-1.9,6.8,0
c0.9,0.9,1.4,2.1,1.4,3.4v62.7L123.9,192.5z M22.7,57.4h130.1V38.1c0-5.3,3.6-7.2,8-4.3l41.8,27.9c1.2,0.6,2.1,1.5,2.7,2.7
c1.4,3,0.2,6.5-2.7,8l-41.8,27.9c-4.4,2.9-8,1-8-4.3V76.7H37.1v96.4h48.2v19.3H22.6c-2.6,0-4.8-2.2-4.8-4.8V62.3
C17.8,59.6,20,57.4,22.7,57.4z">
</path>
</svg>
`;
interface IScenePlayerProps {
className?: string;
scene: GQL.SceneDataFragment;
@@ -98,8 +116,58 @@ export class ScenePlayerImpl extends React.Component<
}
}
private addForwardButton() {
// add forward button: https://github.com/jwplayer/jwplayer/issues/3894
const playerContainer = document.querySelector(
`#${JWUtils.playerID}`
) as HTMLElement;
// display icon
const rewindContainer = playerContainer.querySelector(
".jw-display-icon-rewind"
) as HTMLElement;
const forwardContainer = rewindContainer.cloneNode(true) as HTMLElement;
const forwardDisplayButton = forwardContainer.querySelector(
".jw-icon-rewind"
) as HTMLElement;
forwardDisplayButton.innerHTML = ffSVG;
forwardDisplayButton.ariaLabel = "Forward 10 Seconds";
const nextContainer = playerContainer.querySelector(
".jw-display-icon-next"
) as HTMLElement;
(nextContainer.parentNode as HTMLElement).insertBefore(
forwardContainer,
nextContainer
);
// control bar icon
const buttonContainer = playerContainer.querySelector(
".jw-button-container"
) as HTMLElement;
const rewindControlBarButton = buttonContainer.querySelector(
".jw-icon-rewind"
) as HTMLElement;
const forwardControlBarButton = rewindControlBarButton.cloneNode(
true
) as HTMLElement;
forwardControlBarButton.innerHTML = ffSVG;
forwardControlBarButton.ariaLabel = "Forward 10 Seconds";
(rewindControlBarButton.parentNode as HTMLElement).insertBefore(
forwardControlBarButton,
rewindControlBarButton.nextElementSibling
);
// add onclick handlers
[forwardDisplayButton, forwardControlBarButton].forEach((button) => {
button.onclick = () => {
this.player.seek(this.player.getPosition() + 10);
};
});
}
private onReady() {
this.player = JWUtils.getPlayer();
this.addForwardButton();
this.player.on("error", (err: any) => {
if (err && err.code === 224003) {