Update component & specs & docs

Author: pascalwengerter

app/concepts/matestack/ui/core/video/video.haml

@@ -1 +1,3 @@
-= video_tag(@tag_attributes, ActionController::Base.helpers.asset_path(options[:path]), height: options[:height], width: options[:width], preload: options[:preload], autoplay: options[:autoplay], muted: options[:muted], playsinline: options[:playsinline], loop: options[:loop], controls: options[:controls])
+%video{@tag_attributes}
+  %source{:src => @source, :type => "video/mp4"}
+  Your browser does not support the video tag.

app/concepts/matestack/ui/core/video/video.rb

@@ -3,5 +3,20 @@ class Video < Matestack::Ui::Core::Component::Static
 
     REQUIRED_KEYS = [:path]
 
+    def setup
+      @tag_attributes.merge!({
+        autoplay: options[:autoplay],
+        controls: options[:controls],
+        height: options[:height],
+        loop: options[:loop],
+        muted: options[:muted],
+        playsinline: options[:playsinline],
+        preload: options[:preload],
+        width: options[:width]
+      })
+
+      @source = ActionController::Base.helpers.asset_path(options[:path])
+    end
+
   end
 end

docs/components/video.md

@@ -2,40 +2,53 @@
 
 Show [specs](/spec/usage/components/video_spec.rb)
 
-The HTML video tag implemented in ruby.
+The HTML video tag implemented in Ruby. Right now, only the MP4 format is supported.
 
 ## Parameters
-The video tag takes a mandatory path argument and can take a number of optional configuration params.
+The video component takes a mandatory path argument and can take a number of optional configuration params.
 
-#### # path
-Expects a string with the source to the video. It looks for the video in the `assets/videos` folder and uses the standard Rails asset pipeline.
+#### # autoplay (optional)
+Expects a boolean and specifies whether the video should start playing as soon as it is ready.
 
-#### # id, class
-Like most of the core components, you can give a video an id and a class.
+#### # controls (optional)
+Expects a boolean and specifies whether the video controls (play/pause button etc) should be displayed.
 
 #### # height (optional)
 Expects an integer with the height of the video in px.
 
-#### # width (optional)
-Expects an integer with the width of the video in px.
+#### # id, class (optional)
+Like most of the core components, you can give a video an id and a class.
+
+#### # loop (optional)
+Expects a boolean and specifies whether the video will start over again every time it is finished.
+
+#### # muted (optional)
+Expects a boolean and specifies whether the audio output of the video should be muted.
 
-#### # alt (optional)
-Expects a string with the alt text the video should have.
+#### # path
+Expects a string with the source to the video. It looks for the video in the `assets/videos` folder and uses the standard Rails asset pipeline.
+
+#### # playsinline (optional)
+Expects a boolean and specifies whether the video should be played inline on iOS Safari.
 
-#### # preload
+#### # preload (optional)
 Expects a string (`auto`, `metadata` or `none`) and specifies whether the whole video/only metadata/nothing should be loaded on pageload. Default (if not specified) depends on the client's browser.
 
-#### # autoplay
-Expects a boolean and specifies whether the video should start playing as soon as it is ready.
+#### # width (optional)
+Expects an integer with the width of the video in px.
 
-#### # muted
-Expects a boolean and specifies whether the audio output of the video should be muted.
+## Example
 
-#### # playsinline
-Expects a boolean and specifies whether the video should be played inline on iOS Safari.
 
-#### # loop
-Expects a boolean and specifies whether the video will start over again every time it is finished.
+```ruby
+video path: 'corgi.mp4', width: 500, height: 300
+```
 
-#### # controls
-Expects a boolean and specifies whether the video controls (play/pause button etc) should be displayed.
+returns
+
+```HTML
+<video height='300' width='500'>
+  <source src='/assets/corgi-[...].mp4' type='video/mp4'>
+  Your browser does not support the video tag.
+</video>
+```

spec/usage/components/video_spec.rb

@@ -3,7 +3,7 @@
 
 describe 'Video Component', type: :feature, js: true do
 
-  it 'Renders a video tag on the page' do
+  it 'Renders a simple video tag on the page' do
      class ExamplePage < Matestack::Ui::Page
        def response
          components {
@@ -13,6 +13,23 @@ def response
      end
 
      visit '/example'
-     expect(page).to have_xpath("//video[contains(@src,'corgi.mp4') and @width='500' and @height='300']")
+
+     expect(page).to have_xpath("//video[@width='500' and @height='300']")
+     expect(page).to have_content('Your browser does not support the video tag.')
+  end
+
+  it 'Renders a video tag with more attributes on the page' do
+     class ExamplePage < Matestack::Ui::Page
+       def response
+         components {
+           video path: 'corgi.mp4', width: 500, height: 300,  autoplay: true, controls: true, loop: true, muted: true, playsinline: false, preload: 'auto'
+         }
+       end
+     end
+
+     visit '/example'
+
+     expect(page).to have_xpath("//video[@width='500' and @height='300' and @autoplay and @controls and @loop and @muted and @preload='auto']")
+     expect(page).to have_content('Your browser does not support the video tag.')
   end
 end