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

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/assets/css/librarybrowser.scss
View file

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

52
src/controllers/playback/video/index.html
View file

@ -18,7 +18,7 @@
<div class="osdTextContainer osdSecondaryMediaInfo"></div> <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="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
<div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;"> <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" /> <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>
<div class="buttons focuscontainer-x"> <div class="buttons focuscontainer-x">
<button is="paper-icon-button-light" class="btnRecord autoSize hide"> <div dir="ltr">
<span class="xlargePaperIconButton material-icons fiber_manual_record" aria-hidden="true"></span> <button is="paper-icon-button-light" class="btnRecord autoSize hide">
</button> <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}"> <button is="paper-icon-button-light" class="btnPreviousTrack autoSize hide" title="${PreviousTrack}">
<span class="xlargePaperIconButton material-icons skip_previous" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons skip_previous" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnPreviousChapter autoSize hide" title="${PreviousChapter}"> <button is="paper-icon-button-light" class="btnPreviousChapter autoSize hide" title="${PreviousChapter}">
<span class="xlargePaperIconButton material-icons undo" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons undo" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnRewind" title="${Rewind} (j)" aria-label="${Rewind}"> <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> <span class="xlargePaperIconButton material-icons fast_rewind" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnPause autoSize"> <button is="paper-icon-button-light" class="btnPause autoSize">
<span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons pause" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnFastForward" title="${FastForward} (l)" aria-label="${FastForward}"> <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> <span class="xlargePaperIconButton material-icons fast_forward" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnNextChapter autoSize hide" title="${NextChapter}"> <button is="paper-icon-button-light" class="btnNextChapter autoSize hide" title="${NextChapter}">
<span class="xlargePaperIconButton material-icons redo" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons redo" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}"> <button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}">
<span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span> <span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span>
</button> </button>
</div>
<div class="osdTimeText"> <div class="osdTimeText">
<span class="endsAtText"></span> <span class="endsAtText"></span>

5
src/elements/emby-select/emby-select.scss
View file

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

6
src/elements/emby-slider/emby-slider.js
View file

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

10
src/styles/rtl.scss
View file

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