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
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 V0130 from "./versions/v0130.md";
import V0131 from "./versions/v0131.md"; import V0131 from "./versions/v0131.md";
import V0140 from "./versions/v0140.md"; import V0140 from "./versions/v0140.md";
import V0150 from "./versions/v0150.md";
import { MarkdownPage } from "../Shared/MarkdownPage"; import { MarkdownPage } from "../Shared/MarkdownPage";
// to avoid use of explicit any // to avoid use of explicit any
@@ -56,9 +57,9 @@ const Changelog: React.FC = () => {
// after new release: // after new release:
// add entry to releases, using the current* fields // add entry to releases, using the current* fields
// then update the current fields. // then update the current fields.
const currentVersion = stashVersion || "v0.14.0"; const currentVersion = stashVersion || "v0.15.0";
const currentDate = buildDate; const currentDate = buildDate;
const currentPage = V0140; const currentPage = V0150;
const releases: IStashRelease[] = [ const releases: IStashRelease[] = [
{ {
@@ -67,6 +68,11 @@ const Changelog: React.FC = () => {
page: currentPage, page: currentPage,
defaultOpen: true, defaultOpen: true,
}, },
{
version: "v0.14.0",
date: "2022-04-11",
page: V0140,
},
{ {
version: "v0.13.1", version: "v0.13.1",
date: "2022-03-16", 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 { @media (pointer: coarse) {
margin: 0 -15px; .vjs-touch-enabled {
width: 100vw; &.vjs-has-started .vjs-big-button-group {
display: flex;
opacity: 1;
visibility: visible;
}
&.vjs-has-started .vjs-big-button-group { &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-button-group {
display: flex; opacity: 0;
opacity: 1; pointer-events: none;
visibility: visible; transition: visibility 1s, opacity 1s;
} visibility: visible;
}
&.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-button-group { .vjs-big-play-pause-button .vjs-icon-placeholder::before {
opacity: 0; content: "\f101";
pointer-events: none; font-family: VideoJS;
transition: visibility 1s, opacity 1s; }
visibility: visible;
}
.vjs-big-play-pause-button .vjs-icon-placeholder::before { &.vjs-playing .vjs-big-play-pause-button .vjs-icon-placeholder::before {
content: "\f101"; content: "\f103";
font-family: VideoJS; }
}
&.vjs-playing .vjs-big-play-pause-button .vjs-icon-placeholder::before { // hide the regular play/pause button on touch screens
content: "\f103"; .vjs-play-control {
} display: none;
}
// hide the regular play/pause button on touch screens // hide the regular seek buttons on touch screens
.vjs-play-control { .vjs-control-bar .vjs-seek-button {
display: none; 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 { .scene-tabs {
padding-right: 15px; padding-right: 15px;
} }
.scene-player-container {
padding-left: 0;
padding-right: 0;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.scene-tabs { .scene-tabs {