UNPKG

@flosportsinc/ng-video-autoplay

Version:

Simple way to ensure videos autoplay even if they need to be muted first.

2 lines 4.14 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs/operators"),require("rxjs"),require("typescript-monads")):"function"==typeof define&&define.amd?define("@flosportsinc/ng-video-autoplay",["exports","@angular/core","rxjs/operators","rxjs","typescript-monads"],t):t(((e=e||self).flosportsinc=e.flosportsinc||{},e.flosportsinc["ng-video-autoplay"]={}),e.ng.core,e.rxjs.operators,e.rxjs,e.typescriptMonads)}(this,function(e,t,n,o,i){"use strict";var r=function(e){return e.pipe(n.filter(function(e){return!0===e.halted}))},u=function(e){return e.pipe(n.flatMap(function(e){return e.play().then(function(){return{videoElement:e,halted:!1}}).catch(function(){return{videoElement:e,halted:!0}})}),r)},a=function(e){return e.pipe(n.map(function(e){return e.videoElement.muted=!0,e.videoElement.volume=0,e.videoElement}),u)},l=function(){function e(e,t){var r=this;this.elmRef=e,this.rd=t,this.floVideoAutoplay=!0,this.floVideoAutoplayIndex=0,this.onDestroySource=new o.Subject,this.onDestroy=this.onDestroySource.pipe(n.share()),this.canExecute=function(){return!0===r.floVideoAutoplay||""===r.floVideoAutoplay},this.maybeVideoElement=function(){return i.maybe(r.elmRef.nativeElement).filter(function(e){return"VIDEO"===e.nodeName})},this.maybeUnmuteActionRef=function(){return i.maybe(r.floVideoAutoplayClickUnmuteRef).filter(function(e){return""!==e})},this.maybePlayActionRef=function(){return i.maybe(r.floVideoAutoplayClickPlayRef).filter(function(e){return""!==e})},this.hideRef=function(e){return r.rd.setStyle(e,"display","none")},this.showRef=function(e){return r.rd.setStyle(e,"display","block")},this.volumeChange=function(e){return o.fromEvent(e,"volumechange",{passive:!0}).pipe(n.map(function(e){return e.target}),n.share(),n.takeUntil(r.onDestroy))},this.initOnVideo=function(e){return o.fromEvent(e,"loadstart").pipe(n.tap(function(){return e.setAttribute("autoplay","true")}),n.map(function(e){return e.target}),u,a,n.take(1)).subscribe(function(e){e.videoElement.preload="none",e.videoElement.muted=!1,e.videoElement.volume=1,r.maybePlayActionRef().tapSome(r.showRef)})},this.runUnmuteSequence=function(e){return function(t){return function(i){i.setAttribute("autoplay","true"),o.fromEvent(e,"click").pipe(n.takeUntil(r.onDestroy)).subscribe(function(){i.muted=!1,i.volume=1}),r.volumeChange(i).pipe(n.filter(function(e){return!e.muted||e.volume>0}),n.takeUntil(r.onDestroy)).subscribe(function(){return r.hideRef(e)});var u=r.volumeChange(i).pipe(n.filter(function(e){return e.muted||e.volume<=0}));(t?u.pipe(n.take(1)):u).subscribe(function(){return r.showRef(e)})}}}}return e.prototype.ngAfterContentInit=function(){var e=this;this.canExecute()&&(this.maybeVideoElement().tapSome(this.initOnVideo),this.videos.map(function(e){return e.nativeElement}).forEach(this.initOnVideo),this.maybeUnmuteActionRef().tapSome(function(t){e.hideRef(t),i.either(e.maybeVideoElement().valueOrUndefined(),i.maybe(e.videos.toArray()[e.floVideoAutoplayIndex]).map(function(e){return e.nativeElement}).valueOrUndefined()).tap({left:e.runUnmuteSequence(t)(!1),right:e.runUnmuteSequence(t)(!0)})}),this.maybePlayActionRef().tapSome(function(t){e.hideRef(t),o.fromEvent(t,"click").pipe(n.takeUntil(e.onDestroy)).subscribe(function(){e.hideRef(t),e.maybeVideoElement().tapSome(function(e){return e.play()})})}))},e.prototype.ngOnDestroy=function(){this.onDestroySource.next(),this.onDestroySource.complete()},e.decorators=[{type:t.Directive,args:[{selector:"[floVideoAutoplay]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},e.propDecorators={floVideoAutoplay:[{type:t.Input}],floVideoAutoplayClickUnmuteRef:[{type:t.Input}],floVideoAutoplayClickPlayRef:[{type:t.Input}],floVideoAutoplayIndex:[{type:t.Input}],videos:[{type:t.ContentChildren,args:["floVideoAutoplay",{descendants:!0}]}]},e}(),f=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[l],exports:[l]}]}],e}();e.FloVideoAutoplayModule=f,e.ɵa=l,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=flosportsinc-ng-video-autoplay.umd.min.js.map