proxima.entertainment/plyr
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fullscreen bug fix (fixes #664)

Browse Source
This commit is contained in:
Sam Potts
2017-10-05 22:46:48 +11:00
parent a21ffe983c
commit 34172b9aee
9 changed files with 113 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/less/plyr.less
+43 -40
View File
@@ -9,7 +9,9 @@
// Animation
// ---------------------------------------
@keyframes plyr-progress {
to { background-position: @plyr-progress-loading-size 0; }
to {
background-position: @plyr-progress-loading-size 0;
}
}
// Styles
@@ -35,7 +37,10 @@
& when (@plyr-touch-action = true) {
// Fix 300ms delay
a, button, input, label {
a,
button,
input,
label {
touch-action: manipulation;
}
}
@@ -56,7 +61,7 @@
// Range inputs
// Specificity is for bootstrap compatibility
input[type='range'] {
input[type="range"] {
display: block;
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%;
@@ -137,12 +142,12 @@
}
// Video range inputs
.plyr--video input[type='range'].tab-focus:focus {
.plyr--video input[type="range"].tab-focus:focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
}
// Audio range inputs
.plyr--audio input[type='range'].tab-focus:focus {
.plyr--audio input[type="range"].tab-focus:focus {
outline: 1px dotted fade(@plyr-audio-control-color, 50%);
}
@@ -221,7 +226,7 @@
width: 100%;
padding: (@plyr-control-spacing * 2);
transform: translateY(-(@plyr-control-spacing * 4));
transition: transform .3s ease;
transition: transform 0.3s ease;
color: @plyr-captions-color;
font-size: @plyr-font-size-captions-base;
text-align: center;
@@ -298,7 +303,7 @@
background: transparent;
border-radius: 3px;
cursor: pointer;
transition: background .3s ease, color .3s ease, opacity .3s ease;
transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
color: inherit;
svg {
@@ -347,7 +352,7 @@
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
transition: opacity .3s ease;
transition: opacity 0.3s ease;
button {
// Hover and tab focus
@@ -391,7 +396,7 @@
border-radius: 100%;
box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-control-color;
transition: all .3s ease;
transition: all 0.3s ease;
svg {
position: relative;
@@ -418,11 +423,11 @@
}
// States
.plyr__controls [data-plyr='pause'],
.plyr--playing .plyr__controls [data-plyr='play'] {
.plyr__controls [data-plyr="pause"],
.plyr--playing .plyr__controls [data-plyr="play"] {
display: none;
}
.plyr--playing .plyr__controls [data-plyr='pause'] {
.plyr--playing .plyr__controls [data-plyr="pause"] {
display: inline-block;
}
@@ -438,12 +443,12 @@
}
// Some options are hidden by default
.plyr [data-plyr='captions'],
.plyr [data-plyr='fullscreen'] {
.plyr [data-plyr="captions"],
.plyr [data-plyr="fullscreen"] {
display: none;
}
.plyr--captions-enabled [data-plyr='captions'],
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
.plyr--captions-enabled [data-plyr="captions"],
.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
display: inline-block;
}
@@ -465,13 +470,13 @@
font-size: @plyr-font-size-small;
line-height: 1.3;
transform: translate(-50%, 10px) scale(.8);
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
&::before {
// Arrows
content: '';
content: "";
position: absolute;
width: 0;
height: 0;
@@ -499,7 +504,7 @@
// First tooltip
.plyr__controls button:first-child .plyr__tooltip {
left: 0;
transform: translate(0, 10px) scale(.8);
transform: translate(0, 10px) scale(0.8);
transform-origin: 0 100%;
&::before {
@@ -510,7 +515,7 @@
// Last tooltip
.plyr__controls button:last-child .plyr__tooltip {
right: 0;
transform: translate(0, 10px) scale(.8);
transform: translate(0, 10px) scale(0.8);
transform-origin: 100% 100%;
&::before {
@@ -529,7 +534,6 @@
}
}
// Playback progress
// --------------------------------------------------------------
// <progress> element
@@ -621,13 +625,13 @@
}
.plyr__progress--buffer {
&::-webkit-progress-value {
transition: width .2s ease;
transition: width 0.2s ease;
}
&::-moz-progress-bar {
transition: width .2s ease;
transition: width 0.2s ease;
}
&::-ms-fill {
transition: width .2s ease;
transition: width 0.2s ease;
}
}
.plyr--video .plyr__progress--buffer,
@@ -658,7 +662,8 @@
@plyr-progress-loading-bg 50%,
@plyr-progress-loading-bg 75%,
transparent 75%,
transparent);
transparent
);
color: transparent;
}
.plyr--video.plyr--loading .plyr__progress--buffer {
@@ -685,7 +690,7 @@
// Add a slash in before
&::before {
content: '\2044';
content: "\2044";
margin-right: @plyr-control-spacing;
}
}
@@ -716,21 +721,15 @@
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
.plyr--is-ios .plyr__volume,
.plyr--is-ios [data-plyr='mute'] {
.plyr--is-ios [data-plyr="mute"] {
display: none !important;
}
// Fullscreen
// --------------------------------------------------------------
.plyr--fullscreen-active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 10000000;
background: #000;
border-radius: 0 !important;
@@ -745,12 +744,6 @@
// Revert overflow change
overflow: visible;
}
.plyr__controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
@@ -759,3 +752,13 @@
transform: translateY(-50%);
}
}
// Fallback for unsupported browsers
.plyr--fullscreen-fallback.plyr--fullscreen-active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000000;
}