romo-av 0.1.0

data/.gitignore

@@ -0,0 +1,19 @@
+*.gem
+*.log
+*.rbc
+.rbx/
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,8 @@
+source "https://rubygems.org"
+
+gemspec
+
+gem 'rake', "~> 10.4.0"
+gem 'pry', "~> 0.9.0"
+
+gem "dassets", '~> 0.11'

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015-Present Kelly Redding and Collin Redding
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# RomoAv
+
+Audio/Video components for the [Romo UI Toolkit](https://github.com/redding/romo).
+
+## Usage
+
+TODO: Write code samples and usage instructions here
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'romo-av'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install romo-av
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/assets/js/romo-av/dropdown_video.js

@@ -0,0 +1,303 @@
+$.fn.romoDropdownVideo = function() {
+  return $.map(this, function(element) {
+    return new RomoDropdownVideo(element);
+  });
+}
+
+var RomoDropdownVideo = function(element) {
+  this.elem = $(element);
+
+  this.dropdown = this.elem.romoDropdown()[0];
+  this.doBindDropdown();
+
+  this.video = undefined;
+  this.doBindVideo();
+  this.elem.on('dropdown:loadBodySuccess', $.proxy(function(e, data, dropdown) {
+    this.doBindVideo();
+  }, this));
+
+  this.doInit();
+  this.elem.trigger('dropdownVideo:ready', [this]);
+}
+
+RomoDropdownVideo.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoDropdownVideo.prototype.doBindDropdown = function() {
+  if (this.elem.data('romo-dropdown-clear-content') === undefined) {
+    this.elem.attr('data-romo-dropdown-clear-content', 'true');
+  }
+
+  // dropdown/video interactions
+
+  this.elem.on('dropdownVideo:video:loadedmetadata', $.proxy(function(e, videoObj, video, dropdownVideo) {
+    this.dropdown.doPlacePopupElem();
+  }, this));
+
+  this.elem.on('dropdownVideo:video:enterFullscreen', $.proxy(function(e, videoObj, video, dropdownVideo) {
+    // wait 1 sec then turn off dropdown body elem events - since we are in fullscreen
+    // mode, we don't care about them
+    setTimeout($.proxy(function() {
+      this.dropdown.doUnBindWindowBodyClick();
+      this.dropdown.doUnBindWindowBodyKeyUp();
+      this.dropdown.doUnBindElemKeyUp();
+    }, this), 1000);
+  }, this));
+  this.elem.on('dropdownVideo:video:exitFullscreen', $.proxy(function(e, videoObj, video, dropdownVideo) {
+    // wait 1 sec then turn on dropdown body elem events - since we are no longer
+    // in fullscreen mode, we need to care about them again
+    setTimeout($.proxy(function() {
+      this.dropdown.doBindWindowBodyClick();
+      this.dropdown.doBindWindowBodyKeyUp();
+      this.dropdown.doBindElemKeyUp();
+    }, this), 1000);
+  }, this));
+
+  // event proxies
+
+  this.elem.on('dropdown:ready', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownVideo:dropdown:ready', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:toggle', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownVideo:dropdown:toggle', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:popupOpen', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownVideo:dropdown:popupOpen', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:popupClose', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownVideo:dropdown:popupClose', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:loadBodyStart', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownVideo:dropdown:loadBodyStart', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:loadBodySuccess', $.proxy(function(e, data, dropdown) {
+    this.elem.trigger('dropdownVideo:dropdown:loadBodySuccess', [data, dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:loadBodyError', $.proxy(function(e, xhr, dropdown) {
+    this.elem.trigger('dropdownVideo:dropdown:loadBodyError', [xhr, dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:dismiss', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownVideo:dropdown:dismiss', [dropdown, this]);
+  }, this));
+}
+
+RomoDropdownVideo.prototype.doBindVideo = function() {
+  var videoElem = this.dropdown.popupElem.find('[data-romo-video-auto="dropdownVideo"]');
+
+  this._bindVideoElemEvents(videoElem);
+  this._bindDropdownVideoTriggerEvents();
+
+  this.video = videoElem.romoVideo()[0];
+}
+
+// private
+
+RomoDropdownVideo.prototype._bindVideoElemEvents = function(videoElem) {
+  // playback events
+
+  videoElem.on('video:play', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:play', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:pause', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:pause', [videoObj, video, this]);
+  }, this));
+
+  // state events
+
+  videoElem.on('video:playing', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:playing', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:waiting', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:waiting', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:ended',  $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:ended', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:emptied', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:emptied', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:error', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:error', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:stalled', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:stalled', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:suspend', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:suspend', [videoObj, video, this]);
+  }, this));
+
+  // status events
+
+  videoElem.on('video:progress', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:progress', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:timeupdate', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:timeupdate', [videoObj, video, this]);
+  }, this));
+
+  // settings events
+
+  videoElem.on('video:volumechange', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:volumechange', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:durationchange', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:durationchange', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:ratechange', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:ratechange', [videoObj, video, this]);
+  }, this));
+
+  // fullscreen events
+
+  videoElem.on('video:enterFullscreen', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:enterFullscreen', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:exitFullscreen', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:exitFullscreen', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:fullscreenChange', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:fullscreenChange', [videoObj, video, this]);
+  }, this));
+
+  // load events
+
+  videoElem.on('video:loadstart', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:loadstart', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:loadedmetadata', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:loadedmetadata', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:loadeddata', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:loadeddata', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:canplay', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:canplay', [videoObj, video, this]);
+  }, this));
+  videoElem.on('video:canplaythrough', $.proxy(function(e, videoObj, video) {
+    this.elem.trigger('dropdownVideo:video:canplaythrough', [videoObj, video, this]);
+  }, this));
+}
+
+RomoDropdownVideo.prototype._bindDropdownVideoTriggerEvents = function() {
+  // playback triggers
+
+  this.elem.on('dropdownVideo:video:triggerPlay', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerPlay', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerPause', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerPause', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerTogglePlay', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerTogglePlay', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerSetPlaybackToTime', $.proxy(function(e, secondNum) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerSetPlaybackToTime', [secondNum]);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerSetPlaybackToFrame', $.proxy(function(e, frameNum) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerSetPlaybackToFrame', [frameNum]);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerSetPlaybackToPercent', $.proxy(function(e, percent) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerSetPlaybackToPercent', [percent]);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerModPlaybackByTime', $.proxy(function(e, secondsCount) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerModPlaybackByTime', [secondsCount]);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerModPlaybackByFrames', $.proxy(function(e, frameCount) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerModPlaybackByFrames', [frameCount]);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerModPlaybackByPercent', $.proxy(function(e, percent) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerModPlaybackByPercent', [percent]);
+    }
+  }, this));
+
+  // settings triggers
+
+  this.elem.on('dropdownVideo:video:triggerMute', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerMute', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerUnmute', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerUnmute', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerToggleMute', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerToggleMute', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerSetVolumeToPercent', $.proxy(function(e, percent) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerSetVolumeToPercent', [percent]);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerModVolumeByPercent', $.proxy(function(e, percent) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerModVolumeByPercent', [percent]);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerSetPlaybackRate', $.proxy(function(e, rate) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerSetPlaybackRate', [rate]);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerModPlaybackRate', $.proxy(function(e, rate) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerModPlaybackRate', [rate]);
+    }
+  }, this));
+
+  // fullscreen triggers
+
+  this.elem.on('dropdownVideo:video:triggerEnterFullscreen', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerEnterFullscreen', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerExitFullscreen', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerExitFullscreen', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerToggleFullscreen', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerToggleFullscreen', []);
+    }
+  }, this));
+
+  // load triggers
+
+  this.elem.on('dropdownVideo:video:triggerLoad', $.proxy(function(e) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerLoad', []);
+    }
+  }, this));
+  this.elem.on('dropdownVideo:video:triggerModSource', $.proxy(function(e, source) {
+    if (this.video != undefined) {
+      this.video.elem.trigger('video:triggerModSource', [source]);
+    }
+  }, this));
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-dropdownVideo-auto="true"]').romoDropdownVideo();
+});