Refactor video component & fix tests

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 => @type}
+  Your browser does not support the video tag.

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

@@ -1,7 +1,23 @@
 module Matestack::Ui::Core::Video
   class Video < Matestack::Ui::Core::Component::Static
 
-    REQUIRED_KEYS = [:path]
+    REQUIRED_KEYS = [:path, :type]
+
+    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])
+      @type = "video/#{@options[:type]}"
+    end
 
   end
 end

docs/components/video.md

@@ -2,40 +2,56 @@
 
 Show [specs](/spec/usage/components/video_spec.rb)
 
-The HTML video tag implemented in ruby.
+The HTML video tag implemented in Ruby.
 
 ## Parameters
-The video tag takes a mandatory path argument and can take a number of optional configuration params.
+The video component takes mandatory path and type arguments 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.
 
-#### # alt (optional)
-Expects a string with the alt text the video should have.
+#### # loop (optional)
+Expects a boolean and specifies whether the video will start over again every time it is finished.
 
-#### # preload
-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.
+#### # muted (optional)
+Expects a boolean and specifies whether the audio output of the video should be muted.
 
-#### # autoplay
-Expects a boolean and specifies whether the video should start playing as soon as it is ready.
+#### # 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.
 
-#### # muted
-Expects a boolean and specifies whether the audio output of the video should be muted.
+#### # type
+Expects a string with the type to the video.
 
-#### # playsinline
+#### # playsinline (optional)
 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.
+#### # 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.
 
-#### # controls
-Expects a boolean and specifies whether the video controls (play/pause button etc) should be displayed.
+#### # width (optional)
+Expects an integer with the width of the video in px.
+
+## Example
+
+
+```ruby
+video path: 'corgi.mp4', type: "mp4", width: 500, height: 300
+```
+
+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,16 +3,33 @@
 
 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 {
-           video path: 'corgi.mp4', width: 500, height: 300
+           video path: 'corgi.mp4', type: "mp4", width: 500, height: 300
          }
        end
      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', type: "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