1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Small fix for video player as the progress bar shouldn't be rtl

This commit is contained in:
Hadi Charara 2022-07-03 09:10:02 -04:00
parent 974417ce3d
commit 4530e44e62
5 changed files with 32 additions and 43 deletions

View file

@ -265,7 +265,7 @@
.dashboardDocument .mainDrawer {
z-index: inherit !important;
inset-inline-start: 0 !important;
left: 0 !important;
top: 0 !important;
transform: none !important;
box-shadow: none !important;

View file

@ -18,7 +18,7 @@
<div class="osdTextContainer osdSecondaryMediaInfo"></div>
<div class="flex flex-direction-row align-items-center">
<div class="flex flex-direction-row align-items-center" dir="ltr">
<div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
<div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
<input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
@ -27,37 +27,39 @@
</div>
<div class="buttons focuscontainer-x">
<button is="paper-icon-button-light" class="btnRecord autoSize hide">
<span class="xlargePaperIconButton material-icons fiber_manual_record" aria-hidden="true"></span>
</button>
<div dir="ltr">
<button is="paper-icon-button-light" class="btnRecord autoSize hide">
<span class="xlargePaperIconButton material-icons fiber_manual_record" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide" title="${PreviousTrack}">
<span class="xlargePaperIconButton material-icons skip_previous" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide" title="${PreviousTrack}">
<span class="xlargePaperIconButton material-icons skip_previous" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPreviousChapter autoSize hide" title="${PreviousChapter}">
<span class="xlargePaperIconButton material-icons undo" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPreviousChapter autoSize hide" title="${PreviousChapter}">
<span class="xlargePaperIconButton material-icons undo" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)" aria-label="${Rewind}">
<span class="xlargePaperIconButton material-icons fast_rewind" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)" aria-label="${Rewind}">
<span class="xlargePaperIconButton material-icons fast_rewind" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPause autoSize">
<span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnPause autoSize">
<span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)" aria-label="${FastForward}">
<span class="xlargePaperIconButton material-icons fast_forward" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)" aria-label="${FastForward}">
<span class="xlargePaperIconButton material-icons fast_forward" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnNextChapter autoSize hide" title="${NextChapter}">
<span class="xlargePaperIconButton material-icons redo" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnNextChapter autoSize hide" title="${NextChapter}">
<span class="xlargePaperIconButton material-icons redo" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}">
<span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span>
</button>
<button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}">
<span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span>
</button>
</div>
<div class="osdTimeText">
<span class="endsAtText"></span>

View file

@ -11,7 +11,7 @@
/* General select styles: change as needed */
font-family: inherit;
font-weight: inherit;
padding-block: 0.5em 0.5em;
padding-block: 0.5em;
padding-inline: 0.5em 1.9em;
/* Prevent padding from causing width overflow */
@ -35,9 +35,8 @@
}
.selectContainer-inline > .emby-select {
padding: 0.3em 1.9em 0.3em 0.5em;
padding-block: 0.3em;
padding-inline: 0.5em 0.9em;
padding-inline: 0.5em 1.9em;
font-size: inherit;
}

View file

@ -419,11 +419,7 @@ import { getIsRTL } from '../../scripts/globalize';
function setRange(elem, startPercent, endPercent) {
const style = elem.style;
if (getIsRTL()) {
style.right = Math.max(startPercent, 0) + '%';
} else {
style.left = Math.max(startPercent, 0) + '%';
}
style.insetInlineStart = Math.max(startPercent, 0) + '%';
const widthPercent = endPercent - startPercent;
style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';

View file

@ -1,22 +1,14 @@
.chevron_right,
.chevron_left,
.arrow_back,
.play_arrow,
.playlist_add,
.video_library,
.shuffle,
.input,
.live_tv,
.dvr,
.play_circle_filled,
.shopping_cart,
.vpn_key,
.skip_next,
.skip_previous,
.fast_forward,
.fast_rewind,
.undo,
.redo {
.volume_up {
[dir='rtl'] & {
transform: scale(-1, 1);
}