Merge pull request #70 from basemate/introduce_video_component

Add documented, untested video component

Author: jonasjabari

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

@@ -0,0 +1 @@
+= video_tag(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], class: options[:class], id: options[:id], controls: options[:controls])

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

@@ -0,0 +1,7 @@
+module Matestack::Ui::Core::Video
+  class Video < Matestack::Ui::Core::Component::Static
+
+    REQUIRED_KEYS = [:path]
+
+  end
+end

docs/components/video.md

@@ -1,3 +1,41 @@
 # matestack core component: Video
 
 Show [specs](../../spec/usage/components/video_spec.rb)
+
+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.
+
+#### # path
+Expects a string with the source to the image. It looks for the image in the `assets/videos` folder and uses the standard Rails asset pipeline.
+
+#### # id, class
+Like most of the core components, you can give a video an id and a class.
+
+#### # height (optional)
+Expects an integer with the height of the image in px.
+
+#### # width (optional)
+Expects an integer with the width of the image in px.
+
+#### # alt (optional)
+Expects a string with the alt text the image should have.
+
+#### # 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.
+
+#### # autoplay
+Expects a boolean and specifies whether the video should start playing as soon as it is ready.
+
+#### # muted
+Expects a boolean and specifies whether the audio output of the video should be muted.
+
+#### # 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.
+
+#### # controls
+Expects a boolean and specifies whether the video controls (play/pause button etc) should be displayed.

spec/usage/components/video_spec.rb

@@ -0,0 +1,28 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Video Component', type: :feature, js: true do
+
+  it 'Renders a video tag on the page' do
+    #
+    # class ExamplePage < Matestack::Ui::Page
+    #   def response
+    #     components {
+    #       # simple video
+    #       # test below fails, either add something to `spec/dummy/app/assets/videos/*` or stub it
+    #       # video path: 'yourvid.mp4', width: 500, height: 300
+    #     }
+    #   end
+    # end
+    #
+    # visit '/example'
+    #
+    # static_output = page.html
+    #
+    # expected_static_output = <<~HTML
+    # <video src="yourvid.mp4" width="500" height="300"></video>
+    # HTML
+    #
+    # expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end