milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Media player updates

Browse source 
* Separate code for video player
* Audio player code reverted to pre-video player updates
This commit is contained in:
Tim Hobbs 2014-03-20 01:34:54 -07:00
parent 4721d3722f
commit c806ef8d65
5 changed files with 816 additions and 861 deletions
Download patch file Download diff file Expand all files Collapse all files

284
dashboard-ui/css/mediaplayer-video.css Normal file
View file

@ -0,0 +1,284 @@
#mediaPlayer .mediaPlayerFlyout {
bottom: 64px;
}
#videoBackdrop {
z-index: 99990;
position: fixed;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.6);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#videoPlayer {
z-index: 99997;
background-color: #1d1d1d;
position: fixed;
border: 1px solid #333;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -115px;
}
.itemVideo {
background-color: #000;
margin: 20px 20px 80px;
width: 320px;
height: 181px;
}
#videoControls {
z-index: 99999;
padding: 0 20px 10px;
height: 80px;
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
#videoControls .positionSliderContainer .ui-slider-track {
margin: 0 !important;
}
#videoControls .positionSliderContainer {
display: block;
width: 100%;
margin-top: 0px;
}
#videoControls .currentTime {
margin-top: 25px;
}
/* Fullscreen
***************************************/
#videoPlayer.fullscreenVideo,
#videoPlayer.fullscreenVideo .itemVideo {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
margin: 0 !important;
max-width: 100%;
max-height: 100%;
}
#videoPlayer.fullscreenVideo #videoControls {
opacity: 0.3;
background-color: #1d1d1d;
}
#videoPlayer.fullscreenVideo #videoControls:hover {
opacity: 0.8;
}
#videoPlayer.fullscreenVideo .inactive {
display: none;
}
#videoPlayer.fullscreenVideo:hover .active {
display: block;
}
/* Media queries
***************************************/
@media all and (min-width: 640px) and (min-height: 360px) {
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
width: 480px;
height: 271px;
}
#videoPlayer {
margin-left: -250px;
margin-top: -160px;
}
}
@media all and (min-width: 800px) and (min-height: 450px) {
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
width: 640px;
height: 362px;
}
#videoPlayer {
margin-left: -330px;
margin-top: -205px;
}
}
@media all and (min-width: 960px) and (min-height: 540px) {
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
width: 720px;
height: 406px;
}
#videoPlayer {
margin-left: -370px;
margin-top: -228px;
}
}
@media all and (min-width: 1200px) and (min-height: 720px) {
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
width: 1080px;
height: 610px;
}
#videoPlayer {
margin-left: -550px;
margin-top: -329px;
}
}
@media all and (min-width: 1440px) and (min-height: 720px) {
#mediaPlayer .itemVideo:not(.fullscreenVideo) {
width: 1080px;
height: 610px;
}
#videoPlayer {
margin-left: -550px;
margin-top: -329px;
}
}
/****************************************/
@media all and (max-width: 1200px), all and (max-height: 720px) {
#mediaPlayer .volumeSliderContainer, #mediaPlayer .sendMediaButton {
display: none!important;
}
}
@media all and (max-width: 960px), all and (max-height: 550px) {
#mediaPlayer .volumeSliderContainer, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton, #mediaPlayer .sendMediaButton {
display: none!important;
}
}
@media all and (max-width: 800px), all and (max-height: 460px) {
#mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer, #mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo, #mediaPlayer .sendMediaButton {
display: none!important;
}
}
@media all and (max-width: 640px), all and (max-height: 365px) {
#mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton {
display: none!important;
}
#mediaPlayer .currentTime {
margin-top: 15px;
}
}
@media all and (max-width: 500px) {
#mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton {
display: none!important;
}
}
@media all and (max-width: 400px) {
#mediaPlayer .playlistButton {
display: none!important;
}
}
/****************************************/
.status {
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
width: 150px;
height: 150px;
z-index: 99999;
}
#play {
background-image: url(images/media/play.png);
opacity: 0;
display: none;
}
#pause {
background-image: url(images/media/pause.png);
opacity: 0;
display: none;
}
.fadeOut {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: .25s;
-webkit-animation-duration: .25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeOut {
0% {
transform: scale(.25);
opacity: 0.7;
}
60% {
transform: scale(.5);
opacity: 0.5;
}
80% {
transform: scale(.75);
opacity: 0.3;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(.25);
opacity: 0.7;
}
60% {
-webkit-transform: scale(.5);
opacity: 0.5;
}
80% {
-webkit-transform: scale(.75);
opacity: 0.3;
}
100% {
-webkit-transform: scale(1);
opacity: 0;
}
}
.cursor-active {
cursor: default;
}
.cursor-inactive {
cursor: none;
}