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

Fix Scene Player CLS issue (#1739)

Browse Source
This commit is contained in:
liquid-flow
2021-09-19 08:31:52 +07:00
committed by GitHub
parent 13fda2ad85
commit 919249f851
3 changed files with 19 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/v2.5/src/components/Changelog/versions/v0100.md
View File

@@ -14,6 +14,7 @@
* Added sv-SE language option. ([#1691](https://github.com/stashapp/stash/pull/1691)) * Added sv-SE language option. ([#1691](https://github.com/stashapp/stash/pull/1691))
### 🐛 Bug fixes ### 🐛 Bug fixes
* Fix Scene Player CLS issue ([#1739](https://github.com/stashapp/stash/pull/1739))
* Fix Scene Edit Panel form layout for mobile and desktop. ([#1737](https://github.com/stashapp/stash/pull/1737)) * Fix Scene Edit Panel form layout for mobile and desktop. ([#1737](https://github.com/stashapp/stash/pull/1737))
* Fix Gallery create plugin hook not being invoked when creating Gallery from folder. ([#1731](https://github.com/stashapp/stash/pull/1731)) * Fix Gallery create plugin hook not being invoked when creating Gallery from folder. ([#1731](https://github.com/stashapp/stash/pull/1731))
* Fix tag aliases not being matched when autotagging from the tasks page. ([#1713](https://github.com/stashapp/stash/pull/1713)) * Fix tag aliases not being matched when autotagging from the tasks page. ([#1713](https://github.com/stashapp/stash/pull/1713))

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

@@ -349,6 +349,7 @@ export class ScenePlayerImpl extends React.Component<
onSeeked={this.onSeeked} onSeeked={this.onSeeked}
onTime={this.onTime} onTime={this.onTime}
onOneHundredPercent={() => this.onComplete()} onOneHundredPercent={() => this.onComplete()}
className="video-wrapper"
/> />
<ScenePlayerScrubber <ScenePlayerScrubber
scene={this.props.scene} scene={this.props.scene}

48
ui/v2.5/src/components/ScenePlayer/styles.scss
View File

@@ -1,43 +1,31 @@
$scrubberHeight: 120px; $scrubberHeight: 120px;
$menuHeight: 4rem;
$sceneTabWidth: 450px;
#jwplayer-container { #jwplayer-container {
/* full height minus the top navbar */ display: flex;
height: calc(100vh - 4rem); flex-direction: column;
max-height: calc(100vh - #{$menuHeight});
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
@media (max-width: 1200px) { @media (min-width: 1200px) {
height: inherit; height: 100vh;
.jw-aspect {
display: block;
height: 56.25vw;
max-height: calc(100vh - #{$scrubberHeight} - 4.25rem - 15px);
}
&.portrait .jw-aspect {
height: 177.78vw;
}
}
@media (max-height: 449px), (max-width: 575px) {
.jw-aspect {
max-height: calc(100vh - 4.25rem);
}
} }
& video:focus { & video:focus {
outline: 0; outline: 0;
} }
> div:first-child { .video-wrapper {
/* minus the scrubber height and margin */ height: 56.25vw;
height: calc(100% - #{$scrubberHeight} - 15px);
}
}
/* scrubber is hidden when height < 450px or width < 576, so use entire height for scene player */ @media (min-width: 1200px) {
@media (max-height: 449px), (max-width: 575px) { height: 100%;
#jwplayer-container > div:first-child { }
height: 100%; }
&.portrait .video-wrapper {
height: 177.78vw;
} }
} }
@@ -57,9 +45,6 @@ $scrubberHeight: 120px;
padding-right: 15px; padding-right: 15px;
} }
} }
$sceneTabWidth: 450px;
@media (min-width: 1200px) { @media (min-width: 1200px) {
.scene-tabs { .scene-tabs {
flex: 0 0 $sceneTabWidth; flex: 0 0 $sceneTabWidth;
@@ -117,6 +102,7 @@ $sceneTabWidth: 450px;
} }
.scrubber-wrapper { .scrubber-wrapper {
flex-shrink: 0;
margin: 5px 0; margin: 5px 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;