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

tweak osd for narrow view

Browse source
This commit is contained in:
nyanmisaka 2020-11-17 22:34:02 +08:00
parent 22397fb2a2
commit 17142dc6d3
4 changed files with 21 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,11 +13,11 @@
<div class="osdTextContainer osdSecondaryMediaInfo"></div>
<div class="flex flex-direction-row align-items-center">
<div class="osdTextContainer startTimeText" 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;">
<input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
</div>
<div class="osdTextContainer endTimeText" style="margin: 0 0 0 .25em;"></div>
<div class="osdTextContainer endTimeText osdDurationText" style="margin: 0 0 0 .25em;"></div>
</div>
<div class="buttons focuscontainer-x">
@ -46,8 +46,6 @@
</button>
<div class="osdTimeText">
<span class="osdPositionText"></span>
<span class="osdDurationText"></span>
<span class="endsAtText"></span>
</div>

16
src/controllers/playback/video/index.js
View file

@ -760,7 +760,7 @@ import 'css!assets/css/videoosd';
}
if (runtimeTicks && positionTicks != null && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && currentItem.Type !== 'Recording') {
endsAtText.innerHTML = '&nbsp;&nbsp;-&nbsp;&nbsp;' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
endsAtText.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true);
} else {
endsAtText.innerHTML = '';
}
@ -770,8 +770,20 @@ import 'css!assets/css/videoosd';
nowPlayingPositionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks);
}
if (positionTicks >= 0) {
updateTimeText(nowPlayingPositionText, positionTicks);
updateTimeText(nowPlayingDurationText, runtimeTicks, true);
nowPlayingPositionText.classList.remove('hide');
} else {
nowPlayingPositionText.classList.add('hide');
}
const leftTicks = runtimeTicks - positionTicks;
if (leftTicks >= 0) {
updateTimeText(nowPlayingDurationText, leftTicks);
nowPlayingDurationText.classList.remove('hide');
} else {
nowPlayingPositionText.classList.add('hide');
}
}
}

2
src/elements/emby-slider/emby-slider.css
View file

@ -157,7 +157,7 @@
}
.mdl-slider-background-flex {
background: #333;
background: rgba(255, 255, 255, 0.3);
height: 0.2em;
margin-top: -0.1em;
width: 100%;

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

@ -442,7 +442,9 @@ import 'emby-input';
position = (position / runtime) * 100;
}
for (const range in ranges) {
for (let i = 0, length = ranges.length; i < length; i++) {
const range = ranges[i];
if (position != null) {
if (position >= range.end) {
continue;