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="osdTextContainer osdSecondaryMediaInfo"></div>
<div class="flex flex-direction-row align-items-center"> <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;"> <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" />
</div> </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>
<div class="buttons focuscontainer-x"> <div class="buttons focuscontainer-x">
@ -46,8 +46,6 @@
</button> </button>
<div class="osdTimeText"> <div class="osdTimeText">
<span class="osdPositionText"></span>
<span class="osdDurationText"></span>
<span class="endsAtText"></span> <span class="endsAtText"></span>
</div> </div>

18
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') { 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 { } else {
endsAtText.innerHTML = ''; endsAtText.innerHTML = '';
} }
@ -770,8 +770,20 @@ import 'css!assets/css/videoosd';
nowPlayingPositionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks); nowPlayingPositionSlider.setBufferedRanges(bufferedRanges, runtimeTicks, positionTicks);
} }
updateTimeText(nowPlayingPositionText, positionTicks); if (positionTicks >= 0) {
updateTimeText(nowPlayingDurationText, runtimeTicks, true); updateTimeText(nowPlayingPositionText, positionTicks);
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 { .mdl-slider-background-flex {
background: #333; background: rgba(255, 255, 255, 0.3);
height: 0.2em; height: 0.2em;
margin-top: -0.1em; margin-top: -0.1em;
width: 100%; width: 100%;

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

@ -442,7 +442,9 @@ import 'emby-input';
position = (position / runtime) * 100; 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 != null) {
if (position >= range.end) { if (position >= range.end) {
continue; continue;