github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/video.js

github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/video.js (about)

     1  /*!
     2   * # Semantic UI x.x - Video
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributorss
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  ;(function ($, window, document, undefined) {
    13  
    14  "use strict";
    15  
    16  $.fn.video = function(parameters) {
    17  
    18    var
    19      $allModules     = $(this),
    20  
    21      moduleSelector  = $allModules.selector || '',
    22  
    23      time            = new Date().getTime(),
    24      performance     = [],
    25  
    26      query           = arguments[0],
    27      methodInvoked   = (typeof query == 'string'),
    28      queryArguments  = [].slice.call(arguments, 1),
    29  
    30      requestAnimationFrame = window.requestAnimationFrame
    31        || window.mozRequestAnimationFrame
    32        || window.webkitRequestAnimationFrame
    33        || window.msRequestAnimationFrame
    34        || function(callback) { setTimeout(callback, 0); },
    35  
    36      returnedValue
    37    ;
    38  
    39    $allModules
    40      .each(function() {
    41        var
    42          settings        = ( $.isPlainObject(parameters) )
    43            ? $.extend(true, {}, $.fn.video.settings, parameters)
    44            : $.extend({}, $.fn.video.settings),
    45  
    46          selector        = settings.selector,
    47          className       = settings.className,
    48          error           = settings.error,
    49          metadata        = settings.metadata,
    50          namespace       = settings.namespace,
    51          templates       = settings.templates,
    52  
    53          eventNamespace  = '.' + namespace,
    54          moduleNamespace = 'module-' + namespace,
    55  
    56          $window         = $(window),
    57          $module         = $(this),
    58          $placeholder    = $module.find(selector.placeholder),
    59          $playButton     = $module.find(selector.playButton),
    60          $embed          = $module.find(selector.embed),
    61  
    62          element         = this,
    63          instance        = $module.data(moduleNamespace),
    64          module
    65        ;
    66  
    67        module = {
    68  
    69          initialize: function() {
    70            module.debug('Initializing video');
    71            module.create();
    72            $placeholder
    73              .on('click' + eventNamespace, module.play)
    74            ;
    75            $playButton
    76              .on('click' + eventNamespace, module.play)
    77            ;
    78            module.instantiate();
    79          },
    80  
    81          instantiate: function() {
    82            module.verbose('Storing instance of module', module);
    83            instance = module;
    84            $module
    85              .data(moduleNamespace, module)
    86            ;
    87          },
    88  
    89          create: function() {
    90            var
    91              image = $module.data(metadata.image),
    92              html = templates.video(image)
    93            ;
    94            $module.html(html);
    95            module.refresh();
    96            if(!image) {
    97              module.play();
    98            }
    99            module.debug('Creating html for video element', html);
   100          },
   101  
   102          destroy: function() {
   103            module.verbose('Destroying previous instance of video');
   104            module.reset();
   105            $module
   106              .removeData(moduleNamespace)
   107              .off(eventNamespace)
   108            ;
   109            $placeholder
   110              .off(eventNamespace)
   111            ;
   112            $playButton
   113              .off(eventNamespace)
   114            ;
   115          },
   116  
   117          refresh: function() {
   118            module.verbose('Refreshing selector cache');
   119            $placeholder    = $module.find(selector.placeholder);
   120            $playButton     = $module.find(selector.playButton);
   121            $embed          = $module.find(selector.embed);
   122          },
   123  
   124          // sets new video
   125          change: function(source, id, url) {
   126            module.debug('Changing video to ', source, id, url);
   127            $module
   128              .data(metadata.source, source)
   129              .data(metadata.id, id)
   130              .data(metadata.url, url)
   131            ;
   132            settings.onChange();
   133          },
   134  
   135          // clears video embed
   136          reset: function() {
   137            module.debug('Clearing video embed and showing placeholder');
   138            $module
   139              .removeClass(className.active)
   140            ;
   141            $embed
   142              .html(' ')
   143            ;
   144            $placeholder
   145              .show()
   146            ;
   147            settings.onReset();
   148          },
   149  
   150          // plays current video
   151          play: function() {
   152            module.debug('Playing video');
   153            var
   154              source = $module.data(metadata.source) || false,
   155              url    = $module.data(metadata.url)    || false,
   156              id     = $module.data(metadata.id)     || false
   157            ;
   158            $embed
   159              .html( module.generate.html(source, id, url) )
   160            ;
   161            $module
   162              .addClass(className.active)
   163            ;
   164            settings.onPlay();
   165          },
   166  
   167          get: {
   168            source: function(url) {
   169              if(typeof url !== 'string') {
   170                return false;
   171              }
   172              if(url.search('youtube.com') !== -1) {
   173                return 'youtube';
   174              }
   175              else if(url.search('vimeo.com') !== -1) {
   176                return 'vimeo';
   177              }
   178              return false;
   179            },
   180            id: function(url) {
   181              if(url.match(settings.regExp.youtube)) {
   182                return url.match(settings.regExp.youtube)[1];
   183              }
   184              else if(url.match(settings.regExp.vimeo)) {
   185                return url.match(settings.regExp.vimeo)[2];
   186              }
   187              return false;
   188            }
   189          },
   190  
   191          generate: {
   192            // generates iframe html
   193            html: function(source, id, url) {
   194              module.debug('Generating embed html');
   195              var
   196                html
   197              ;
   198              // allow override of settings
   199              source = source || settings.source;
   200              id     = id     || settings.id;
   201              if((source && id) || url) {
   202                if(!source || !id) {
   203                  source = module.get.source(url);
   204                  id     = module.get.id(url);
   205                }
   206                if(source == 'vimeo') {
   207                  html = ''
   208                    + '<iframe src="//player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
   209                    + ' width="100%" height="100%"'
   210                    + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
   211                  ;
   212                }
   213                else if(source == 'youtube') {
   214                  html = ''
   215                    + '<iframe src="//www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
   216                    + ' width="100%" height="100%"'
   217                    + ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
   218                  ;
   219                }
   220              }
   221              else {
   222                module.error(error.noVideo);
   223              }
   224              return html;
   225            },
   226  
   227            // generate url parameters
   228            url: function(source) {
   229              var
   230                api      = (settings.api)
   231                  ? 1
   232                  : 0,
   233                autoplay = (settings.autoplay === 'auto')
   234                  ? ($module.data('image') !== undefined)
   235                  : settings.autoplay,
   236                hd       = (settings.hd)
   237                  ? 1
   238                  : 0,
   239                showUI   = (settings.showUI)
   240                  ? 1
   241                  : 0,
   242                // opposite used for some params
   243                hideUI   = !(settings.showUI)
   244                  ? 1
   245                  : 0,
   246                url = ''
   247              ;
   248              if(source == 'vimeo') {
   249                url = ''
   250                  +      'api='      + api
   251                  + '&amp;title='    + showUI
   252                  + '&amp;byline='   + showUI
   253                  + '&amp;portrait=' + showUI
   254                  + '&amp;autoplay=' + autoplay
   255                ;
   256                if(settings.color) {
   257                  url += '&amp;color=' + settings.color;
   258                }
   259              }
   260              if(source == 'ustream') {
   261                url = ''
   262                  + 'autoplay=' + autoplay
   263                ;
   264                if(settings.color) {
   265                  url += '&amp;color=' + settings.color;
   266                }
   267              }
   268              else if(source == 'youtube') {
   269                url = ''
   270                  + 'enablejsapi='      + api
   271                  + '&amp;autoplay='    + autoplay
   272                  + '&amp;autohide='    + hideUI
   273                  + '&amp;hq='          + hd
   274                  + '&amp;modestbranding=1'
   275                ;
   276                if(settings.color) {
   277                  url += '&amp;color=' + settings.color;
   278                }
   279              }
   280              return url;
   281            }
   282          },
   283  
   284          setting: function(name, value) {
   285            module.debug('Changing setting', name, value);
   286            if( $.isPlainObject(name) ) {
   287              $.extend(true, settings, name);
   288            }
   289            else if(value !== undefined) {
   290              settings[name] = value;
   291            }
   292            else {
   293              return settings[name];
   294            }
   295          },
   296          internal: function(name, value) {
   297            if( $.isPlainObject(name) ) {
   298              $.extend(true, module, name);
   299            }
   300            else if(value !== undefined) {
   301              module[name] = value;
   302            }
   303            else {
   304              return module[name];
   305            }
   306          },
   307          debug: function() {
   308            if(settings.debug) {
   309              if(settings.performance) {
   310                module.performance.log(arguments);
   311              }
   312              else {
   313                module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
   314                module.debug.apply(console, arguments);
   315              }
   316            }
   317          },
   318          verbose: function() {
   319            if(settings.verbose && settings.debug) {
   320              if(settings.performance) {
   321                module.performance.log(arguments);
   322              }
   323              else {
   324                module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
   325                module.verbose.apply(console, arguments);
   326              }
   327            }
   328          },
   329          error: function() {
   330            module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
   331            module.error.apply(console, arguments);
   332          },
   333          performance: {
   334            log: function(message) {
   335              var
   336                currentTime,
   337                executionTime,
   338                previousTime
   339              ;
   340              if(settings.performance) {
   341                currentTime   = new Date().getTime();
   342                previousTime  = time || currentTime;
   343                executionTime = currentTime - previousTime;
   344                time          = currentTime;
   345                performance.push({
   346                  'Name'           : message[0],
   347                  'Arguments'      : [].slice.call(message, 1) || '',
   348                  'Element'        : element,
   349                  'Execution Time' : executionTime
   350                });
   351              }
   352              clearTimeout(module.performance.timer);
   353              module.performance.timer = setTimeout(module.performance.display, 100);
   354            },
   355            display: function() {
   356              var
   357                title = settings.name + ':',
   358                totalTime = 0
   359              ;
   360              time = false;
   361              clearTimeout(module.performance.timer);
   362              $.each(performance, function(index, data) {
   363                totalTime += data['Execution Time'];
   364              });
   365              title += ' ' + totalTime + 'ms';
   366              if(moduleSelector) {
   367                title += ' \'' + moduleSelector + '\'';
   368              }
   369              if($allModules.length > 1) {
   370                title += ' ' + '(' + $allModules.length + ')';
   371              }
   372              if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
   373                console.groupCollapsed(title);
   374                if(console.table) {
   375                  console.table(performance);
   376                }
   377                else {
   378                  $.each(performance, function(index, data) {
   379                    console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
   380                  });
   381                }
   382                console.groupEnd();
   383              }
   384              performance = [];
   385            }
   386          },
   387          invoke: function(query, passedArguments, context) {
   388            var
   389              object = instance,
   390              maxDepth,
   391              found,
   392              response
   393            ;
   394            passedArguments = passedArguments || queryArguments;
   395            context         = element         || context;
   396            if(typeof query == 'string' && object !== undefined) {
   397              query    = query.split(/[\. ]/);
   398              maxDepth = query.length - 1;
   399              $.each(query, function(depth, value) {
   400                var camelCaseValue = (depth != maxDepth)
   401                  ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
   402                  : query
   403                ;
   404                if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
   405                  object = object[camelCaseValue];
   406                }
   407                else if( object[camelCaseValue] !== undefined ) {
   408                  found = object[camelCaseValue];
   409                  return false;
   410                }
   411                else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
   412                  object = object[value];
   413                }
   414                else if( object[value] !== undefined ) {
   415                  found = object[value];
   416                  return false;
   417                }
   418                else {
   419                  module.error(error.method, query);
   420                  return false;
   421                }
   422              });
   423            }
   424            if ( $.isFunction( found ) ) {
   425              response = found.apply(context, passedArguments);
   426            }
   427            else if(found !== undefined) {
   428              response = found;
   429            }
   430            if($.isArray(returnedValue)) {
   431              returnedValue.push(response);
   432            }
   433            else if(returnedValue !== undefined) {
   434              returnedValue = [returnedValue, response];
   435            }
   436            else if(response !== undefined) {
   437              returnedValue = response;
   438            }
   439            return found;
   440          }
   441        };
   442  
   443        if(methodInvoked) {
   444          if(instance === undefined) {
   445            module.initialize();
   446          }
   447          module.invoke(query);
   448        }
   449        else {
   450          if(instance !== undefined) {
   451            instance.invoke('destroy');
   452          }
   453          module.initialize();
   454        }
   455      })
   456    ;
   457    return (returnedValue !== undefined)
   458      ? returnedValue
   459      : this
   460    ;
   461  };
   462  
   463  $.fn.video.settings = {
   464  
   465    name        : 'Video',
   466    namespace   : 'video',
   467  
   468    debug       : false,
   469    verbose     : true,
   470    performance : true,
   471  
   472    metadata    : {
   473      id     : 'id',
   474      image  : 'image',
   475      source : 'source',
   476      url    : 'url'
   477    },
   478  
   479    source      : false,
   480    url         : false,
   481    id          : false,
   482  
   483    aspectRatio : (16/9),
   484  
   485    onPlay   : function(){},
   486    onReset  : function(){},
   487    onChange : function(){},
   488  
   489    // callbacks not coded yet (needs to use jsapi)
   490    onPause  : function() {},
   491    onStop   : function() {},
   492  
   493    width    : 'auto',
   494    height   : 'auto',
   495  
   496    autoplay : 'auto',
   497    color    : '#442359',
   498    hd       : true,
   499    showUI   : false,
   500    api      : true,
   501  
   502    regExp : {
   503      youtube : /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/,
   504      vimeo   : /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/
   505    },
   506  
   507    error      : {
   508      noVideo     : 'No video specified',
   509      method      : 'The method you called is not defined'
   510    },
   511  
   512    className   : {
   513      active      : 'active'
   514    },
   515  
   516    selector    : {
   517      embed       : '.embed',
   518      placeholder : '.placeholder',
   519      playButton  : '.play'
   520    }
   521  };
   522  
   523  $.fn.video.settings.templates = {
   524    video: function(image) {
   525      var
   526        html = ''
   527      ;
   528      if(image) {
   529        html += ''
   530          + '<i class="video play icon"></i>'
   531          + '<img class="placeholder" src="' + image + '">'
   532        ;
   533      }
   534      html += '<div class="embed"></div>';
   535      return html;
   536    }
   537  };
   538  
   539  
   540  })( jQuery, window , document );