Fix video layout on touch enabled devices (#2501)

This commit is contained in:
WithoutPants 2022-04-15 10:51:49 +10:00 committed by GitHub
parent 50e83a3555
commit a7beeb32b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 31 deletions

View file

@ -18,6 +18,7 @@ import V0120 from "./versions/v0120.md";
import V0130 from "./versions/v0130.md";
import V0131 from "./versions/v0131.md";
import V0140 from "./versions/v0140.md";
import V0150 from "./versions/v0150.md";
import { MarkdownPage } from "../Shared/MarkdownPage";
// to avoid use of explicit any
@ -56,9 +57,9 @@ const Changelog: React.FC = () => {
// after new release:
// add entry to releases, using the current* fields
// then update the current fields.
const currentVersion = stashVersion || "v0.14.0";
const currentVersion = stashVersion || "v0.15.0";
const currentDate = buildDate;
const currentPage = V0140;
const currentPage = V0150;
const releases: IStashRelease[] = [
{
@ -67,6 +68,11 @@ const Changelog: React.FC = () => {
page: currentPage,
defaultOpen: true,
},
{
version: "v0.14.0",
date: "2022-04-11",
page: V0140,
},
{
version: "v0.13.1",
date: "2022-03-16",

View file

@ -0,0 +1,2 @@
### 🐛 Bug fixes
* Fix incorrect video player positioning on touch-enabled devices. ([#2501](https://github.com/stashapp/stash/issues/2501))

View file

@ -57,40 +57,39 @@ $sceneTabWidth: 450px;
}
}
.vjs-touch-enabled {
margin: 0 -15px;
width: 100vw;
@media (pointer: coarse) {
.vjs-touch-enabled {
&.vjs-has-started .vjs-big-button-group {
display: flex;
opacity: 1;
visibility: visible;
}
&.vjs-has-started .vjs-big-button-group {
display: flex;
opacity: 1;
visibility: visible;
}
&.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-button-group {
opacity: 0;
pointer-events: none;
transition: visibility 1s, opacity 1s;
visibility: visible;
}
&.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-button-group {
opacity: 0;
pointer-events: none;
transition: visibility 1s, opacity 1s;
visibility: visible;
}
.vjs-big-play-pause-button .vjs-icon-placeholder::before {
content: "\f101";
font-family: VideoJS;
}
.vjs-big-play-pause-button .vjs-icon-placeholder::before {
content: "\f101";
font-family: VideoJS;
}
&.vjs-playing .vjs-big-play-pause-button .vjs-icon-placeholder::before {
content: "\f103";
}
&.vjs-playing .vjs-big-play-pause-button .vjs-icon-placeholder::before {
content: "\f103";
}
// hide the regular play/pause button on touch screens
.vjs-play-control {
display: none;
}
// hide the regular play/pause button on touch screens
.vjs-play-control {
display: none;
}
// hide the regular seek buttons on touch screens
.vjs-control-bar .vjs-seek-button {
display: none;
// hide the regular seek buttons on touch screens
.vjs-control-bar .vjs-seek-button {
display: none;
}
}
}
@ -216,6 +215,11 @@ $sceneTabWidth: 450px;
.scene-tabs {
padding-right: 15px;
}
.scene-player-container {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 1200px) {
.scene-tabs {