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

rework video player buttons

Browse source
This commit is contained in:
Luke Pulverenti 2015-05-05 00:17:38 -04:00
parent 19fd673e46
commit 5257e91628
4 changed files with 45 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

16
dashboard-ui/css/mediaplayer-video.css
View file

@ -47,7 +47,7 @@
} }
.videoTopControls { .videoTopControls {
padding: .7em 1em; padding: 1em;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
position: absolute; position: absolute;
left: 0; left: 0;
@ -61,10 +61,6 @@
vertical-align: top; vertical-align: top;
} }
.videoControls .currentTime {
margin-top: 25px;
}
#slider-tooltip { #slider-tooltip {
z-index: 99999; z-index: 99999;
position: absolute; position: absolute;
@ -135,11 +131,11 @@
#mediaPlayer .ui-slider-track, .nowPlayingBar .ui-slider-track, .nowPlayingPage .ui-slider-track { #mediaPlayer .ui-slider-track, .nowPlayingBar .ui-slider-track, .nowPlayingPage .ui-slider-track {
border-color: #2ad !important; border-color: #2ad !important;
height: 2px!important; height: 2px !important;
} }
#videoPlayer .inactive { #videoPlayer .inactive {
display: none!important; display: none !important;
} }
.idlePlayer video { .idlePlayer video {
@ -149,6 +145,7 @@
#mediaPlayer .sliderContainer { #mediaPlayer .sliderContainer {
position: relative; position: relative;
top: 5px; top: 5px;
vertical-align: middle;
} }
/****************************************/ /****************************************/
@ -190,10 +187,11 @@
@media all and (max-width: 555px) { @media all and (max-width: 555px) {
#mediaPlayer .videoControls .previousTrackButton, #mediaPlayer .videoControls .nextTrackButton { #mediaPlayer .videoControls .previousTrackButton, #mediaPlayer .videoControls .nextTrackButton {
display: none!important; display: none !important;
} }
.videoTopControlsLogo { .videoTopControlsLogo {
display: none!important; display: none !important;
} }
} }

34
dashboard-ui/css/mediaplayer.css
View file

@ -9,15 +9,19 @@
vertical-align: top; vertical-align: top;
} }
.nowPlayingBar .mediaButton { .mediaButton {
vertical-align: middle; vertical-align: middle;
font-size: 30px; font-size: 30px;
color: #e8e8e8!important; color: #e8e8e8 !important;
margin: 0 10px; margin: 0 10px;
min-width: 30px; min-width: 30px;
text-align: center; text-align: center;
} }
.videoTopControls .mediaButton {
font-size: 26px;
}
#mediaElement { #mediaElement {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -28,14 +32,20 @@
font-weight: normal; font-weight: normal;
position: relative; position: relative;
top: -7px; top: -7px;
margin: 0 30px 0 3px; margin: 0 0 0 3px;
max-width: 200px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
text-align: left; text-align: left;
font-size: 15px; font-size: 15px;
max-width: 200px;
}
@media (min-width: 800px) {
.nowPlayingText {
margin-right: 30px;
}
} }
.nowPlayingDoubleText { .nowPlayingDoubleText {
@ -59,18 +69,12 @@
.currentTime { .currentTime {
display: inline-block; display: inline-block;
position: relative; vertical-align: middle;
top: -10px;
max-width: 110px; max-width: 110px;
margin-right: 2em; margin-right: 2em;
font-weight: normal; font-weight: normal;
} }
.nowPlayingBar .currentTime {
top: inherit;
vertical-align: middle;
}
.mediaSlider { .mediaSlider {
position: relative; position: relative;
top: -10px; top: -10px;
@ -108,7 +112,7 @@
} }
.volumeButton { .volumeButton {
margin-right: .5em!important; margin-right: .5em !important;
} }
::-ms-thumb { ::-ms-thumb {
@ -141,7 +145,7 @@ input[type="range"]::-ms-fill-upper {
margin-bottom: 0; margin-bottom: 0;
} }
.nowPlayingBar .mediaButton:not(.unpauseButton):not(.pauseButton):not(.remoteControlButton) { .nowPlayingBar .mediaButton:not(.unpauseButton):not(.pauseButton):not(.remoteControlButton):not(.stopButton) {
display: none; display: none;
} }
@ -149,7 +153,7 @@ input[type="range"]::-ms-fill-upper {
float: right; float: right;
} }
.nowPlayingBar .unpauseButton, .nowPlayingBar .pauseButton { .nowPlayingBar .unpauseButton, .nowPlayingBar .pauseButton, .nowPlayingBar .stopButton {
float: right; float: right;
} }
@ -158,7 +162,7 @@ input[type="range"]::-ms-fill-upper {
} }
.nowPlayingBar { .nowPlayingBar {
padding: 10px 5px 10px 0; padding: 10px 5px 10px 10px;
text-align: left; text-align: left;
} }
} }

1
dashboard-ui/scripts/nowplayingbar.js
View file

@ -21,7 +21,6 @@
var html = ''; var html = '';
html += '<div class="nowPlayingBar" style="display:none;">'; html += '<div class="nowPlayingBar" style="display:none;">';
html += '<div style="display:inline-block;width:12px;"></div>';
html += '<div class="nowPlayingImage"></div>'; html += '<div class="nowPlayingImage"></div>';
html += '<div class="nowPlayingText"></div>'; html += '<div class="nowPlayingText"></div>';

38
dashboard-ui/scripts/site.js
View file

@ -1501,22 +1501,22 @@ var Dashboard = {
videoPlayerHtml += '<div class="videoTopControlsLogo"></div>'; videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
videoPlayerHtml += '<div class="videoAdvancedControls">'; videoPlayerHtml += '<div class="videoAdvancedControls">';
videoPlayerHtml += '<button class="mediaButton videoTrackControl previousTrackButton" title="Previous video" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoTrackControl previousTrackButton imageButton" title="Previous video" type="button" onclick="MediaPlayer.previousTrack();" data-role="none"><i class="fa fa-step-backward"></i></button>';
videoPlayerHtml += '<button class="mediaButton videoTrackControl nextTrackButton" title="Next video" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoTrackControl nextTrackButton imageButton" title="Next video" type="button" onclick="MediaPlayer.nextTrack();" data-role="none"><i class="fa fa-step-forward"></i></button>';
videoPlayerHtml += '<button class="mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonAudioTracks') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoAudioButton imageButton" title="Audio tracks" type="button" data-role="none"><i class="fa fa-music"></i></button>';
videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>'; videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoSubtitleButton imageButton" title="Subtitles" type="button" data-role="none"><i class="fa fa-text-width"></i></button>';
videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>'; videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonScenes') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoChaptersButton imageButton" title="Scenes" type="button" data-role="none"><i class="fa fa-video-camera"></i></button>';
videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>'; videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonQuality') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoQualityButton imageButton" title="Quality" type="button" data-role="none"><i class="fa fa-gear"></i></button>';
videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b"></div>'; videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonStop') + '</button>'; videoPlayerHtml += '<button class="mediaButton imageButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-role="none"><i class="fa fa-close"></i></button>';
videoPlayerHtml += '</div>'; // videoAdvancedControls videoPlayerHtml += '</div>'; // videoAdvancedControls
videoPlayerHtml += '</div>'; // videoTopControls videoPlayerHtml += '</div>'; // videoTopControls
@ -1524,10 +1524,15 @@ var Dashboard = {
// Create controls // Create controls
videoPlayerHtml += '<div class="videoControls hiddenOnIdle">'; videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton videoTrackControl" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>'; videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>'; videoPlayerHtml += '<div class="nowPlayingImage"></div>';
videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPause') + '</button>'; videoPlayerHtml += '<div class="nowPlayingText"></div>';
videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton videoTrackControl" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>'; videoPlayerHtml += '</div>'; // nowPlayingInfo
videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton videoTrackControl imageButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-role="none"><i class="fa fa-step-backward"></i></button>';
videoPlayerHtml += '<button id="video-playButton" class="mediaButton imageButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-role="none"><i class="fa fa-play"></i></button>';
videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton imageButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-role="none"><i class="fa fa-pause"></i></button>';
videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton videoTrackControl imageButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-role="none"><i class="fa fa-step-forward"></i></button>';
videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">'; videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />'; videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
@ -1535,19 +1540,14 @@ var Dashboard = {
videoPlayerHtml += '<div class="currentTime">--:--</div>'; videoPlayerHtml += '<div class="currentTime">--:--</div>';
videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">'; videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton imageButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-role="none"><i class="fa fa-volume-up"></i></button>';
videoPlayerHtml += '<div class="nowPlayingImage"></div>'; videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton imageButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-role="none"><i class="fa fa-volume-off"></i></button>';
videoPlayerHtml += '<div class="nowPlayingText"></div>';
videoPlayerHtml += '</div>'; // nowPlayingInfo
videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonMute') + '</button>';
videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonUnmute') + '</button>';
videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">'; videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">';
videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />'; videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
videoPlayerHtml += '</div>'; videoPlayerHtml += '</div>';
videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>'; videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton imageButton" title="Fullscreen" type="button" data-role="none"><i class="fa fa-expand"></i></button>';
videoPlayerHtml += '</div>'; // videoControls videoPlayerHtml += '</div>'; // videoControls