From 7e313a2cbe45762462067d4f473881b5c34194d9 Mon Sep 17 00:00:00 2001 From: Christian Pillsbury Date: Thu, 25 Jul 2024 13:40:05 -0700 Subject: [PATCH 1/2] fix(mux-player): use CSS to disable subtitle shifting for iOS in fullscreen. --- .../mux-player/src/themes/classic/classic.html | 16 ++++++++++++++-- .../mux-player/src/themes/gerwig/gerwig.html | 16 ++++++++++++++-- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/mux-player/src/themes/classic/classic.html b/packages/mux-player/src/themes/classic/classic.html index 7531dc050..3903bb1ba 100644 --- a/packages/mux-player/src/themes/classic/classic.html +++ b/packages/mux-player/src/themes/classic/classic.html @@ -62,16 +62,28 @@ /* 0.433s is the transition duration for VTT Regions. * Borrowed here, so the captions don't move too fast. */ - media-controller ::slotted([slot='media']) { + media-controller { --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s; } - media-controller:is([mediapaused],:not([userinactive])) ::slotted([slot='media']) { + media-controller:is([mediapaused],:not([userinactive])) { /* 42px is the height of the control bar and progress bar * with an additional 5px as a buffer, to get 47px */ --media-webkit-text-track-transform: translateY(-47px); --media-webkit-text-track-transition: transform 0.15s ease; } + /* + * CSS specific to iOS devices. + * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757 + */ + @supports (-webkit-touch-callout: none) { + /* Disable subtitle adjusting for iOS Safari */ + media-controller[mediaisfullscreen] { + --media-webkit-text-track-transform: unset; + --media-webkit-text-track-transition: unset; + } + } + :host media-time-range { color: var(--_primary-color); --media-range-thumb-opacity: 0; diff --git a/packages/mux-player/src/themes/gerwig/gerwig.html b/packages/mux-player/src/themes/gerwig/gerwig.html index 42094eb49..e89911818 100644 --- a/packages/mux-player/src/themes/gerwig/gerwig.html +++ b/packages/mux-player/src/themes/gerwig/gerwig.html @@ -66,15 +66,27 @@ * 0.433s is the transition duration for VTT Regions. * Borrowed here, so the captions don't move too fast. */ - media-controller ::slotted([slot='media']) { + media-controller { --media-webkit-text-track-transform: translateY(0) scale(0.98); --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s; } - media-controller:is([mediapaused], :not([userinactive])) ::slotted([slot='media']) { + media-controller:is([mediapaused], :not([userinactive])) { --media-webkit-text-track-transform: translateY(-50px) scale(0.98); --media-webkit-text-track-transition: transform 0.15s ease; } + /* + * CSS specific to iOS devices. + * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757 + */ + @supports (-webkit-touch-callout: none) { + /* Disable subtitle adjusting for iOS Safari */ + media-controller[mediaisfullscreen] { + --media-webkit-text-track-transform: unset; + --media-webkit-text-track-transition: unset; + } + } + media-time-range { --media-box-padding-left: 6px; --media-box-padding-right: 6px; From 63201ddf4e028194390ffcf0619e5d7acbe184a0 Mon Sep 17 00:00:00 2001 From: Christian Pillsbury Date: Fri, 26 Jul 2024 11:07:25 -0700 Subject: [PATCH 2/2] build(mux-player): version bump of media chrome for fullscreen ios fixes. --- packages/mux-player/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mux-player/package.json b/packages/mux-player/package.json index 0ec107b56..a0263f224 100644 --- a/packages/mux-player/package.json +++ b/packages/mux-player/package.json @@ -96,7 +96,7 @@ "dependencies": { "@mux/mux-video": "0.20.0", "@mux/playback-core": "0.25.0", - "media-chrome": "~3.2.3" + "media-chrome": "~3.2.5" }, "devDependencies": { "@mux/esbuilder": "0.1.0", diff --git a/yarn.lock b/yarn.lock index 052738025..9c8cf165e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11192,10 +11192,10 @@ mdn-data@2.0.4: resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b" integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA== -media-chrome@~3.2.3: - version "3.2.3" - resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-3.2.3.tgz#581d3cc0ea4994838884ac3d769b95cc50954c1e" - integrity sha512-DlOlyciT5YgOn5cwGvLWz+OVUVgvyxsRLtfpIQJ11F10+Ix7tDjEqMWsnkL81be9iD3uh/SN35TIk2pRvvEAig== +media-chrome@~3.2.5: + version "3.2.5" + resolved "https://registry.yarnpkg.com/media-chrome/-/media-chrome-3.2.5.tgz#657722a216e3c0f877d9522fce7425e25da7e137" + integrity sha512-tTsgS7x77Bn4p/wca/Si/7A+Q3z9DzKq0SOkroQvrNMXBVyQasMayDcsKg5Ur5NGsymZfttnJi7tXvVr/tPj8g== media-tracks@~0.3.2: version "0.3.2"