Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Prepare for 2.0 #2

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Prepare for 2.0 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a01fa7
Include icons in template
bennypowers Mar 25, 2017
2058c5a
Updated CSS to use ::slotted
bennypowers Mar 28, 2017
c4dcfb6
Placed icons in separate file
bennypowers Mar 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0",
"paper-slider": "Inrego/paper-slider#^1.0.13",
"paper-material": "PolymerElements/paper-material#^1.0.6"
"paper-material": "PolymerElements/paper-material#^1.0.6",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
Expand Down
33 changes: 33 additions & 0 deletions paper-video-controls-icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="pvc" size="24">
<svg>
<defs>
<g id="play">
<path d="M8 5v14l11-7z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</g>
<g id="pause">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</g>
<g id="fullscreen">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
</g>
<g id="fullscreen-exit">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
</g>
<g id="unmute">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</g>
<g id="mute">
<path d="M7 9v6h4l5 5V4l-5 5H7z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</g>
</defs>
</svg>
</iron-iconset-svg>
108 changes: 65 additions & 43 deletions paper-video-controls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<!DOCTYPE html>

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/av-icons.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="paper-video-controls-icons.html">

<!--
`paper-video-controls`
Expand Down Expand Up @@ -36,10 +37,15 @@
`--paper-video-controls-slider-color` | Color of the sliders (both progress bar and volume). | `--google-blue-700`
`--paper-video-controls-pin-text-color` | Color of the text inside the pin | `white`

@demo demo/index.html
@demo demo/index.html
-->

<dom-module id="paper-video-controls">
<style>
paper-video-controls #container:not(:-webkit-full-screen) .fullscreen-controls {
display: none;
}
</style>
<template>
<style>
:host {
Expand All @@ -50,21 +56,21 @@
--paper-video-controls-slider-color: var(--google-blue-700);
--paper-video-controls-pin-text-color: white;
}
:host #container:-webkit-full-screen ::content .top-controls {
:host #container:-webkit-full-screen ::slotted(#topControls) {

}
:host #container:-webkit-full-screen #videoControls,
:host #container:fullscreen #videoControls,
:host #container:-moz-full-screen #videoControls,
:host #container:-ms-fullscreen #videoControls,
:host #container:-webkit-full-screen ::content .top-controls,
:host #container:fullscreen ::content .top-controls,
:host #container:-moz-full-screen ::content .top-controls,
:host #container:-ms-fullscreen ::content .top-controls {

:host #container:-webkit-full-screen ::slotted(#topControls),
:host #container:fullscreen ::slotted(#topControls),
:host #container:-moz-full-screen ::slotted(#topControls),
:host #container:-ms-fullscreen ::slotted(#topControls) {
position: fixed;
}
:host #videoControls,:host ::content .top-controls {
:host #videoControls,:host ::slotted(#topControls) {
position: absolute;
left: 0;
right: 0;
Expand All @@ -78,12 +84,9 @@
align-items: center;
padding: 15px;
}
:host ::content .top-controls {
:host ::slotted(#topControls) {
top: 0px;
}
:host ::content #container:not(:-webkit-full-screen) .fullscreen-controls {
display: none;
}
:host .container {
position: relative;
display: inline-block;
Expand All @@ -97,23 +100,23 @@
max-width: 120px;
}
:host #container:-webkit-full-screen,
:host #container:-webkit-full-screen ::content video {
:host #container:-webkit-full-screen ::slotted(video) {
width: 100vw;
height: 100vh;
}
:host ::content video {
:host ::slotted(video) {
background-color: black;
width: 100%;
}
:host.controls-hidden .container {
cursor: none;
}

:host(.controls-hidden:not([controls])) {
cursor: default;
}
:host(.controls-hidden) #videoControls, :host(.controls-hidden) ::content .top-controls {

:host(.controls-hidden) #videoControls, :host(.controls-hidden) ::slotted(#topControls) {
transition: 0.5s;
opacity: 0;
pointer-events: none;
Expand All @@ -131,22 +134,41 @@
--paper-slider-pin-color: var(--paper-video-controls-slider-color);
--paper-slider-font-color: var(--paper-video-controls-pin-text-color);
}
@media (max-width:640px) {
@media (max-width:640px) {
#volumeSlider, #toggleMute {
display: none;
}
}
</style>

<div id="container" class="container">
<content id="videoContent" select="video"></content>
<content id="topControls" select=".top-controls"></content>
<slot id="videoContent" name="video"></slot>
<slot id="topControls" name="top-controls"></slot>
<paper-material elevation="1" hidden$="{{!controls}}" id="videoControls">
<paper-icon-button id="playPauseIcon" on-tap="togglePlayPause" icon="av:play-arrow"></paper-icon-button>
<span class="video-time">{{_readableDuration(currentTime)}}/[[_readableDuration(duration)]]</span>
<paper-slider pin="[[timePin]]" id="durationSlider" max="[[duration]]" on-change="_changeCurrentTime" immediate-value="{{durationSliderValue}}" pin-label="[[_readableDuration(durationSliderValue)]]"></paper-slider>
<paper-icon-button id="toggleMute" icon="av:volume-up" on-tap="toggleMute"></paper-icon-button>
<paper-slider pin="[[volumePin]]" pin-label="[[_readableVolume(volumeSliderValue)]]" immediate-value="{{volumeSliderValue}}" id="volumeSlider" value="{{videoVolume}}" on-immediate-value-change="_changeVolume"></paper-slider>
<paper-icon-button id="fullScreen" icon="icons:fullscreen" on-tap="toggleFullScreen"></paper-icon-button>
<paper-icon-button id="playPauseIcon"
on-tap="togglePlayPause"
icon="pvc:play"></paper-icon-button>
<span class="video-time">
{{_readableDuration(currentTime)}}/[[_readableDuration(duration)]]
</span>
<paper-slider id="durationSlider"
max="[[duration]]"
on-change="_changeCurrentTime"
immediate-value="{{durationSliderValue}}"
pin="[[timePin]]"
pin-label="[[_readableDuration(durationSliderValue)]]"></paper-slider>
<paper-icon-button id="toggleMute"
icon="pvc:mute"
on-tap="toggleMute"></paper-icon-button>
<paper-slider id="volumeSlider"
pin="[[volumePin]]"
pin-label="[[_readableVolume(volumeSliderValue)]]"
immediate-value="{{volumeSliderValue}}"
value="{{videoVolume}}"
on-immediate-value-change="_changeVolume"></paper-slider>
<paper-icon-button id="fullScreen"
icon="pvc:fullscreen"
on-tap="toggleFullScreen"></paper-icon-button>
</paper-material>
</div>
</template>
Expand All @@ -165,7 +187,7 @@
};
video.onloadedmetadata = function() {
that._durationChange();
}
};
video.ontimeupdate = function() {
that._currentTimeChange();
};
Expand All @@ -175,23 +197,23 @@
};
this._currentVolumeChange();
video.onpause = function() {
that.$.playPauseIcon.icon = "av:play-arrow";
}
that.$.playPauseIcon.icon = "pvc:play";
};
video.onplay = function() {
that.$.playPauseIcon.icon = "av:pause";
}
that.$.playPauseIcon.icon = "pvc:pause";
};
if (this.requestFullScreen) {
this.onfullscreenchange = function() {
that._fullscreenChange(document.fullscreen);
}
};
} else if (this.webkitRequestFullscreen) {
this.onwebkitfullscreenchange = function() {
that._fullScreenChange(document.webkitIsFullScreen);
}
};
} else if (this.mozRequestFullScreen) {
document.onmozfullscreenchange = function() {
that._fullScreenChange(document.mozFullScreen);
}
};
} else if (video.webkitEnterFullscreen) {
video.addEventListener("webkitbeginfullscreen", function() {
that._fullscreenChange(true);
Expand All @@ -211,7 +233,7 @@
value: true
},
/**
* If true, will show a small pin with percentage when dragging the volume slider.
* If true, will show a small pin with percentage when dragging the volume slider.
*/
volumePin: {
type: Boolean,
Expand Down Expand Up @@ -252,7 +274,7 @@
},
_currentTimeChange: function() {
var duration = this.$.video.duration;
if (!isNaN(duration) && duration !== undefined && duration != null) {
if (!isNaN(duration) && duration !== undefined && duration !== null) {
this._durationChange();
}
this.currentTime = this.$.video.currentTime;
Expand All @@ -265,22 +287,22 @@
},
_currentVolumeChange: function() {
this.videoVolume = this.$.video.volume * 100;
this.$.toggleMute.icon = this.$.video.muted ? "av:volume-off" : "av:volume-up"
this.$.toggleMute.icon = this.$.video.muted ? "pvc:mute" : "pvc:unmute";
},
_changeVolume: function() {
this.$.video.volume = this.$.volumeSlider.immediateValue / 100;
},
_changeCurrentTime: function() {
if (!this.$.durationSlider.dragging) {
this.$.video.currentTime = this.$.durationSlider.value
this.$.video.currentTime = this.$.durationSlider.value;
}
},
_readableVolume: function(volume) {
return volume + "%";
},
_fullScreenChange: function(fullScreen) {
this._setFullScreen(fullScreen);
this.$.fullScreen.icon = fullScreen ? "icons:fullscreen-exit" : "icons:fullscreen"
this.$.fullScreen.icon = fullScreen ? "pvc:fullscreen-exit" : "pvc:fullscreen";
},
/**
* Shows the controls
Expand Down Expand Up @@ -339,7 +361,7 @@
*/
togglePlayPause: function() {
if (this.$.video.paused) {
this.$.video.play()
this.$.video.play();
} else {
this.$.video.pause();
}
Expand Down