simpla-video.html

<link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../simpla-element-behavior/simpla-element-behavior.html"> <link rel="import" href="../simpla-styles/simpla-styles.html" async> <dom-module id="simpla-video"> <template> <style>*,::after,::before,:host{-webkit-box-sizing:border-box;box-sizing:border-box}.wrapper{position:relative;overflow:hidden}.wrapper[data-placeholder]{background-size:cover!important;background-position:center center!important}.video{position:relative;width:100%;height:0;padding-bottom:56.25%}.video__embed,.video__thumb{position:absolute;top:0;left:0;width:100%;height:100%}.video__thumb{cursor:pointer;z-index:1}.video__embed[disabled]{pointer-events:none}.edit-target{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;cursor:pointer;background:var(--simpla-light-black);opacity:0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.edit-target:hover{opacity:1}.input{font-family:var(--simpla-font-family);font-size:var(--simpla-scale-00);font-weight:200;position:absolute;top:0;left:0;right:0;width:90%;margin:auto;max-width:30em;padding:.9em 1em;color:#fff;background:var(--simpla-med-black);border:0;outline:0;border-radius:0 0 var(--simpla-border-radius) var(--simpla-border-radius);z-index:1;-webkit-transform:translateY(-101%);transform:translateY(-101%);-webkit-transition:-webkit-transform 80ms var(--simpla-easing-accelerate);transition:-webkit-transform 80ms var(--simpla-easing-accelerate);transition:transform 80ms var(--simpla-easing-accelerate);transition:transform 80ms var(--simpla-easing-accelerate),-webkit-transform 80ms var(--simpla-easing-accelerate)}.input[visible]{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 130ms var(--simpla-easing-decelerate);transition:-webkit-transform 130ms var(--simpla-easing-decelerate);transition:transform 130ms var(--simpla-easing-decelerate);transition:transform 130ms var(--simpla-easing-decelerate),-webkit-transform 130ms var(--simpla-easing-decelerate)}.input::-webkit-input-placeholder{color:var(--simpla-bright-white)}.input:-ms-input-placeholder{color:var(--simpla-bright-white)}.input::placeholder{color:var(--simpla-bright-white)}[hidden]{display:none!important}</style> <div id="wrapper" class="wrapper" data-placeholder$="[[editable]]"> <template is="dom-if" if="[[editable]]"> <div class="edit-target" on-tap="_edit" hidden$="[[active]]"> </div> <input type="text" id="src-input" class="input" value="{{src::input}}" placeholder="Enter Youtube or Vimeo URL" hidden$="[[!editable]]" visible$="[[active]]" on-blur="_close" on-keydown="_closeOnHotkeys"> </template> <div class="video"> <img class="video__thumb" src$="[[_thumbnail]]" on-tap="_loadVideo" hidden$="[[!_displayThumbnail(defer, _videoReady)]]"> <iframe class="video__embed" src$="[[_embed]]" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen mozallowfullscreen="" webkitallowfullscreen="" oallowfullscreen="" msallowfullscreen="" hidden$="[[!_videoLoaded]]" disabled$="[[editable]]"> </iframe> </div> </div> </template> <script>!function(){"use strict";function e(e){var t=function(t){return t.urlRegex.test(e)},i=o.find(t);return i?i.label:null}function t(e,t){var i=r.find(function(e){return e.provider===t}),n=void 0;return i&&(n=e.match(i.regex)[i.matchGroup]),n||null}function i(e,t){return u[t]+e+a[t]}function n(e,t){return new Promise(function(i){switch(t){case"youtube":i(""+l+e+"/hqdefault.jpg");break;case"vimeo":fetch(""+s+e+".json").then(function(e){return e.json()}).then(function(e){return i(e[0].thumbnail_large)});break;default:i(!1)}})}var o=[{urlRegex:/youtube|youtu\.be/,label:"youtube"},{urlRegex:/vimeo/,label:"vimeo"}],r=[{provider:"vimeo",regex:/https?:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/,matchGroup:2},{provider:"youtube",regex:/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/,matchGroup:7}],u={youtube:"https://www.youtube.com/embed/",vimeo:"https://player.vimeo.com/video/"},a={youtube:"?rel=0&showinfo=0",vimeo:"?title=0&byline=0"},l="https://img.youtube.com/vi/",s="https://vimeo.com/api/v2/video/",c={type:"Video",dataProperties:["src"]};Polymer({is:"simpla-video",properties:{src:{type:String,notify:!0,value:""},active:{type:Boolean,notify:!0,value:!1},defer:{type:Boolean,value:!1},placeholder:{type:String},_embed:String,_thumbnail:String,_videoReady:{type:Boolean,value:!1}},observers:["_initVideo(src)","_ensureInactiveOnIneditable(editable)","_showPlaceholder(editable)"],behaviors:[SimplaBehaviors.Element(c)],_initVideo:function(e){if(!e)return this._embed="",void(this._thumbnail="");this._videoReady=!1,this.defer?this._generateThumbnail(e):this._generateEmbed(e)},_generateEmbed:function(n){var o=e(n),r=t(n,o);this._embed=r&&o?i(r,o):"",this._videoReady=!0},_generateThumbnail:function(i){var o=this,r=e(i);n(t(i,r),r).then(function(e){return o._thumbnail=e})},_loadVideo:function(){this._generateEmbed(this.src)},_showPlaceholder:function(e){var t=this.$.wrapper;this.placeholder=this.placeholder||"url("+this.resolveUrl("placeholder.svg")+")",t.style.background=e?this.placeholder:""},_displayThumbnail:function(e,t){return e&&!t},_edit:function(){this.editable&&(this.active=!0,this.$$("#src-input").focus())},_close:function(){this.editable&&(this.active=!1)},_closeOnHotkeys:function(e){var t=13===e.keyCode,i=27===e.keyCode;this.active&&(t||i)&&(this.active=!1)},_ensureInactiveOnIneditable:function(e){e||(this.active=!1)}})}()</script> </dom-module>