{"key":"gifplayer","version":"1.0.0","name":"Gif Player","instructions":"This is a GIF player.","amd":"1","requirejs":"","shim":"","requirecss":"","body":"<img class=\"gifplayer\" src=\"@@DEFAULTPOSTERURL@@\" width=\"@@WIDTH@@\" />","script":"//=========================\n//if not already declared\nif(typeof $.fn.gifplayer == 'undefined'){\n\nfunction GifPlayer(preview, options){\n\t\tthis.previewElement = preview;\n\t\tthis.options = options;\n\t\tthis.animationLoaded = false;\n\t}\n\n\tGifPlayer.scopes = new Array();\n\n\tGifPlayer.prototype = {\n\n\t\tsupportedFormats: ['gif', 'jpeg', 'jpg', 'png'],\n\n\t\tactivate: function(){\n\t\t\tvar self = this;\n\t\t\tif(this.previewElement.width() === 0){\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\tself.activate();\n\t\t\t\t}, 100);\n\t\t\t}else{\n\t\t\t\tself.mode = self.getOption('mode');\n\t\t\t\tself.wrap();\n\t\t\t\tself.addSpinner();\n\t\t\t\tself.addControl();\n\t\t\t\tself.addEvents();\n\t\t\t}\n\t\t},\n\n\t\twrap: function(){\n\t\t\tthis.previewElement.addClass('gifplayer-ready');\n\t\t\tthis.wrapper = this.previewElement.wrap(\"<div class='gifplayer-wrapper'></div>\").parent();\n\t\t\tthis.wrapper.css('width', this.previewElement.width());\n\t\t\tthis.wrapper.css('height', this.previewElement.height());\n\t\t\tthis.previewElement.css('cursor','pointer');\n\t\t},\n\n\t\taddSpinner: function(){\n\t\t\tthis.spinnerElement = $(\"<div class = 'spinner'></div>\");\n\t\t\tthis.wrapper.append(this.spinnerElement);\n\t\t\tthis.spinnerElement.hide();\n\t\t},\n\n\t\tgetOption: function(option){\n\t\t\tvar dataOption = this.previewElement.data(option.toLowerCase());\n\t\t\tif(dataOption != undefined && dataOption != ''){\n\t\t\t\treturn dataOption;\n\t\t\t}else{\n\t\t\t\treturn this.options[option];\n\t\t\t}\n\t\t},\n\n\t\taddControl: function(){\n\t\t\tvar label = this.getOption('label');\n\t\t\tthis.playElement = $(\"<ins class='play-gif'>\" + label + \"</ins>\");\n\t\t\tthis.wrapper.append(this.playElement);\n\t\t\tthis.playElement.css('top', this.previewElement.height()/2 - this.playElement.height()/2);\n\t\t\tthis.playElement.css('left', this.previewElement.width()/2 - this.playElement.width()/2);\n\t\t},\n\n\t\taddEvents: function(){\n\t\t\tvar gp = this;\n\t\t\tvar playOn = this.getOption('playOn');\n\n\t\t\tswitch(playOn){\n\t\t\t\tcase 'click':\n\t\t\t\t\tgp.playElement.on( 'click', function(e){\n\t\t\t\t\t\tgp.previewElement.trigger('click');\n\t\t\t\t\t});\n\t\t\t\t\tgp.previewElement.on( 'click', function(e){\n\t\t\t\t\t\tgp.loadAnimation();\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'hover':\n\t\t\t\t\tgp.previewElement.on( 'click mouseover', function(e){\n\t\t\t\t\t\tgp.loadAnimation();\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'auto':\n\t\t\t\t\tconsole.log('auto not implemented yet');\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tconsole.log(playOn + ' is not accepted as playOn value.');\n\t\t\t}\n\t\t},\n\n\t\tprocessScope: function(){\n\t\t\tscope = this.getOption('scope');\n\t\t\tif( scope ){\n\t\t\t\tif(GifPlayer.scopes[scope]){\n\t\t\t\t\tGifPlayer.scopes[scope].stopGif();\n\t\t\t\t}\n\t\t\t\tGifPlayer.scopes[scope] = this;\n\t\t\t}\n\t\t},\n\n\t\tloadAnimation: function(){\n\t\t\tthis.processScope();\n\n\t\t\tthis.spinnerElement.show();\n\n\t\t\tif( this.mode == 'gif'){\n\t\t\t\tthis.loadGif();\n\t\t\t}else if(this.mode == 'video'){\n\t\t\t\tif(!this.videoLoaded){\n\t\t\t\t\tthis.loadVideo();\n\t\t\t\t}else{\n\t\t\t\t\tthis.playVideo();\n\t\t\t\t}\n\n\t\t\t}\n\t\t\t// Fire event onPlay\n\t\t\tthis.getOption('onPlay').call(this.previewElement);\n\t\t},\n\n\t\tstopGif: function(){\n\t\t\tthis.gifElement.hide();\n\t\t\tthis.previewElement.show();\n\t\t\tthis.playElement.show();\n\t\t\tthis.resetEvents();\n\t\t\tthis.getOption('onStop').call(this.previewElement);\n\t\t},\n\n\t\tgetFile: function( ext ){\n\t\t\t// Obtain the resource default path\n\t\t\tvar gif = this.getOption(ext);\n\t\t\tif(gif != undefined && gif != ''){\n\t\t\t\treturn gif;\n\t\t\t}else{\n\t\t\t\treplaceString = this.previewElement.attr('src');\n\n\t\t\t\tfor (i = 0; i < this.supportedFormats.length; i++) {\n\t\t\t\t\tpattrn = new RegExp( this.supportedFormats[i]+'$', 'i' );\n\t\t\t\t\treplaceString = replaceString.replace( pattrn, ext );\n\t\t\t\t}\n\n\t\t\t\treturn replaceString;\n\t\t\t}\n\t\t},\n\n\t\tloadGif: function(){\n\t\t\tvar gp = this;\n\n\t\t\tgp.playElement.hide();\n\n\t\t\tif(!this.animationLoaded){\n\t\t\t\tthis.enableAbort();\n\t\t\t}\n\t\t\tvar gifSrc = this.getFile('gif');\n\t\t\tvar gifWidth = this.previewElement.width();\n\t\t\tvar gifHeight = this.previewElement.height();\n\n\t\t\tthis.gifElement=$(\"<img class='gp-gif-element' width='\"+ gifWidth + \"' height=' \"+ gifHeight +\" '/>\");\n\n\t\t\tvar wait = this.getOption('wait');\n\t\t\tif(wait){\n\t\t\t\t//Wait until gif loads\n\t\t\t\tthis.gifElement.load( function(){\n\t\t\t\t\tgp.animationLoaded = true;\n\t\t\t\t\tgp.resetEvents();\n\t\t\t\t\tgp.previewElement.hide();\n\t\t\t\t\tgp.wrapper.append(gp.gifElement);\n\t\t\t\t\tgp.spinnerElement.hide();\n\t\t\t\t\tgp.getOption('onLoadComplete').call(gp.previewElement);\n\t\t\t\t});\n\t\t\t}else{\n\t\t\t\t//Try to show gif instantly\n\t\t\t\tgp.animationLoaded = true;\n\t\t\t\tgp.resetEvents();\n\t\t\t\tgp.previewElement.hide();\n\t\t\t\tgp.wrapper.append(gp.gifElement);\n\t\t\t\tgp.spinnerElement.hide();\n\t\t\t}\n\t\t\tthis.gifElement.css('cursor','pointer');\n\t\t\tthis.gifElement.css('position','absolute');\n\t\t\tthis.gifElement.css('top','0');\n\t\t\tthis.gifElement.css('left','0');\n\t\t\tthis.gifElement.attr('src', gifSrc);\n\t\t\tthis.gifElement.click( function(e){\n\t\t\t\t$(this).remove();\n\t\t\t\tgp.stopGif();\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t});\n\t\t\tgp.getOption('onLoad').call(gp.previewElement);\n\n\t\t},\n\n\t\tloadVideo: function(){\n\t\t\tthis.videoLoaded = true;\n\n\t\t\tvar videoSrcMp4 = this.getFile('mp4');\n\t\t\tvar videoSrcWebm = this.getFile('webm');\n\t\t\tvar videoWidth = this.previewElement.width();\n\t\t\tvar videoHeight = this.previewElement.height();\n\n\t\t\tthis.videoElement = $('<video class=\"gp-video-element\" width=\"' +\n\t\t\t\tvideoWidth + 'px\" height=\"' + videoHeight + '\" style=\"margin:0 auto;width:' +\n\t\t\t\tvideoWidth + 'px;height:' + videoHeight + 'px;\" autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" poster=\"' +\n\t\t\t\tthis.previewElement.attr('src') + '\"><source type=\"video/mp4\" src=\"' +\n\t\t\t\tvideoSrcMp4 + '\"><source type=\"video/webm\" src=\"' + videoSrcWebm + '\"></video>');\n\n\t\t\tvar gp = this;\n\n\t\t\tvar checkLoad = function(){\n\t\t\t\tif(gp.videoElement[0].readyState === 4){\n\t\t\t\t\tgp.playVideo();\n\t\t\t\t\tgp.animationLoaded = true;\n\t\t\t\t}else{\n\t\t\t\t\tsetTimeout(checkLoad, 100);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tvar wait = this.getOption('wait');\n\t\t\tif(wait){\n\t\t\t\tcheckLoad();\n\t\t\t}else{\n\t\t\t\tthis.playVideo();\n\t\t\t}\n\n\t\t\tthis.videoElement.on('click', function(){\n\t\t\t\tif(gp.videoPaused){\n\t\t\t\t\tgp.resumeVideo();\n\t\t\t\t}else{\n\t\t\t\t\tgp.pauseVideo();\n\t\t\t\t}\n\t\t\t});\n\t\t},\n\n\t\tplayVideo: function(){\n\t\t\tthis.spinnerElement.hide();\n\t\t\tthis.previewElement.hide();\n\t\t\tthis.playElement.hide();\n\n\t\t\tthis.gifLoaded = true;\n\t\t\tthis.previewElement.hide();\n\t\t\tthis.wrapper.append(this.videoElement);\n\t\t\tthis.videoPaused = false;\n\t\t\tthis.videoElement[0].play();\n\t\t\tthis.getOption('onPlay').call(this.previewElement);\n\t\t},\n\n\t\tpauseVideo: function(){\n\t\t\tthis.videoPaused = true;\n\t\t\tthis.videoElement[0].pause();\n\t\t\tthis.playElement.show();\n\t\t\tthis.mouseoverEnabled = false;\n\t\t\tthis.getOption('onStop').call(this.previewElement);\n\t\t},\n\n\t\tresumeVideo: function(){\n\t\t\tthis.videoPaused = false;\n\t\t\tthis.videoElement[0].play();\n\t\t\tthis.playElement.hide();\n\t\t\tthis.getOption('onPlay').call(this.previewElement);\n\t\t},\n\n\t\tenableAbort: function(){\n\t\t\tvar gp = this;\n\t\t\tthis.previewElement.click( function(e){\n\t\t\t\tgp.abortLoading(e);\n\t\t\t});\n\t\t\tthis.spinnerElement.click( function(e){\n\t\t\t\tgp.abortLoading(e);\n\t\t\t});\n\t\t},\n\n\t\tabortLoading: function(e){\n\t\t\tthis.spinnerElement.hide();\n\t\t\tthis.playElement.show();\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.gifElement.off('load').on( 'load', function(ev){\n\t\t\t\tev.preventDefault();\n\t\t\t\tev.stopPropagation();\n\t\t\t});\n\t\t\tthis.resetEvents();\n\t\t\tthis.getOption('onStop').call(this.previewElement);\n\t\t},\n\n\t\tresetEvents: function(){\n\t\t\tthis.previewElement.off('click');\n\t\t\tthis.previewElement.off('mouseover');\n\t\t\tthis.playElement.off('click');\n\t\t\tthis.spinnerElement.off('click');\n\t\t\tthis.addEvents();\n\t\t}\n\n\t};\n\n\t$.fn.gifplayer = function(options) {\n\n\t\t// Check if we should operate with some method\n\t\tif (/^(play|stop)$/i.test(options)) {\n\n\t\t\treturn this.each( function(){\n\t\t\t\t// Normalize method's name\n\t\t\t\toptions = options.toLowerCase();\n\t\t\t\tif($(this).hasClass('gifplayer-ready')){\n\t\t\t\t\t//Setup gifplayer object\n\t\t\t\t\tvar gp = new GifPlayer($(this), null);\n\t\t\t\t\tgp.options = {};\n\t\t\t\t\tgp.options = $.extend({}, $.fn.gifplayer.defaults, gp.options);\n\t\t\t\t\tgp.wrapper = $(this).parent();\n\t\t\t\t\tgp.spinnerElement = gp.wrapper.find('.spinner');\n\t\t\t\t\tgp.playElement = gp.wrapper.find('.play-gif');\n\t\t\t\t\tgp.gifElement = gp.wrapper.find('.gp-gif-element');\n\t\t\t\t\tgp.videoElement = gp.wrapper.find('.gp-video-element');\n\t\t\t\t\tgp.mode = gp.getOption('mode');\n\n\t\t\t\t\tswitch(options){\n\t\t\t\t\t\tcase 'play':\n\t\t\t\t\t\t\tgp.playElement.trigger('click');\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'stop':\n\t\t\t\t\t\t\tif(!gp.playElement.is(':visible')){\n\t\t\t\t\t\t\t\tif(gp.mode == 'gif'){\n\t\t\t\t\t\t\t\t\tgp.stopGif();\n\t\t\t\t\t\t\t\t}else if( gp.mode == 'video'){\n\t\t\t\t\t\t\t\t\tgp.videoElement.trigger('click');\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t}else{ //Create instance\n\t\t\treturn this.each(function(){\n\t\t\t\toptions = $.extend({}, $.fn.gifplayer.defaults, options);\n\t\t\t\tvar gifplayer = new GifPlayer($(this), options);\n\t\t\t\tgifplayer.activate();\n\t\t\t});\n\t\t}\n\t};\n\n\t$.fn.gifplayer.defaults = {\n\t\tlabel: 'GIF',\n\t\tplayOn: 'click',\n\t\tmode: 'gif',\n\t\tgif: '',\n\t\tmp4: '',\n\t\twebm: '',\n\t\twait: false,\n\t\tscope: false,\n\t\tonPlay: function(){},\n\t\tonStop: function(){},\n\t\tonLoad: function(){},\n\t\tonLoadComplete: function(){}\n\t};\n}//end if if already declared\n//=========================\n\n\n$('.gifplayer').gifplayer({wait: false, \nplayOn: 'click',\n label: 'Play', \nmode: 'gif',\ngif: @@VIDEOURL@@,\n onPlay: function(){\n        this.playstatus='playing';\n    },\n    onStop: function(){\n         this.playstatus='stopped';\n    },\n\n});\n$('.gifplayer').click(function(e){if(this['playstatus'] && this.playstatus=='playing'){this.stop();}})\n","defaults":"WIDTH=400","style":"ins.play-gif{\n\tposition: absolute;\n\tfont-family: Arial, sans serif;\n\twidth: 50px;\n\theight: 50px;\n\tline-height: 52px;\n\ttext-align: center;\n\tbackground: #222;\n\tfont-size: 18px;\n\tcolor: #fff;\n\tborder-radius: 50%;\n\topacity: .9;\n\tborder: 4px solid #fff;\n\tcursor:pointer;\n\ttext-decoration: none;\n}\n\nins.play-gif:hover{\n\topacity:.5;\n}\n\n.gifplayer-wrapper{\n\tposition:relative;\n\tdisplay: inline-block;\n}\n\n.spinner {\n\theight:50px;\n\twidth:50px;\n\tmargin:0px auto;\n\tposition:absolute;\n\ttop:50%;\n\tleft:50%;\n\tmargin-top:-25px;\n\tmargin-left:-25px;\n\t-webkit-animation: rotation .6s infinite linear;\n\t-moz-animation: rotation .6s infinite linear;\n\t-o-animation: rotation .6s infinite linear;\n\tanimation: rotation .6s infinite linear;\n\tborder-left:6px solid rgba(256,256,256,.15);\n\tborder-right:6px solid rgba(256,256,256,.15);\n\tborder-bottom:6px solid rgba(256,256,256,.15);\n\tborder-top:6px solid rgba(256,256,256,.8);\n\tborder-radius:100%;\n}\n\n@-webkit-keyframes rotation {\n\tfrom {-webkit-transform: rotate(0deg);}\n\tto {-webkit-transform: rotate(359deg);}\n}\n\n@-moz-keyframes rotation {\n\tfrom {-moz-transform: rotate(0deg);}\n\tto {-moz-transform: rotate(359deg);}\n}\n\n@-o-keyframes rotation {\n\tfrom {-o-transform: rotate(0deg);}\n\tto {-o-transform: rotate(359deg);}\n}\n\n@keyframes rotation {\n\tfrom {transform: rotate(0deg);}\n\tto {transform: rotate(359deg);}\n}","alternate":""}