Merge pull request #144 from basemate/add_youtube_component

Add youtube component

Author: jonasjabari

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

@@ -0,0 +1 @@
+%iframe{@tag_attributes}

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

@@ -0,0 +1,26 @@
+module Matestack::Ui::Core::Youtube
+  class Youtube < Matestack::Ui::Core::Component::Static
+
+    REQUIRED_KEYS = [:yt_id, :height, :width]
+
+    def setup
+      url = 'https://www.youtube.com/embed/'
+      url = 'https://www.youtube-nocookie.com/embed/' if options[:privacy_mode] == true
+      url << options[:yt_id]
+      url << '?' unless options[:no_controls] != true and options[:start_at].nil?
+      url << 'controls=0' if options[:no_controls] == true
+      url << '&amp;' if (options[:no_controls] != nil) and (options[:start_at] != nil)
+      url << "start=#{options[:start_at]}" unless options[:start_at].nil?
+
+      @tag_attributes.merge!({
+        'src': url,
+        'allow': 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
+        'allowfullscreen': '',
+        'frameborder': 0,
+        'height': options[:height],
+        'width': options[:width]
+      })
+    end
+
+  end
+end

docs/components/youtube.md

@@ -0,0 +1,55 @@
+# matestack core component: Youtube
+
+Show [specs](../../spec/usage/components/youtube_spec.rb)
+
+A youtube video, embedded into an `iFrame` HTML tag.
+
+## Parameters
+The video tag takes mandatory *youtube id*, *height* and *width* arguments and can take a number of optional configuration params.
+
+#### # yt_id
+Expects a string with the id to the youtube video you want to embed.
+
+#### # id, class (optional)
+Like most of the core components, you can give a video an id and a class.
+
+#### # height
+Expects an integer with the height of the iFrame in px.
+
+#### # width
+Expects an integer with the width of the iFrame in px.
+
+#### # no_controls (optional)
+Expects a boolean. If set to true, no controls will be displayed with the embedded youtube video.
+
+#### # privacy_mode (optional)
+Expects a boolean. If set to true, the video gets loaded from 'www.youtube-nocookie.com' instead of the default 'www.youtube.com'.
+
+#### # start_at (optional)
+Expects an integer that indicates at what second the video should start.
+
+## Example 1
+
+```ruby
+youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I'
+```
+
+gets rendered into
+
+```HTML
+<iframe allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen='' frameborder='0' height='360' src='https://www.youtube.com/embed/OY5AeGhgK7I' width='360'></iframe>
+```
+
+## Example 2
+
+```ruby
+youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', start_at: 30, no_controls: true
+youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', start_at: 30, privacy_mode: true
+```
+
+gets rendered into
+
+```HTML
+<iframe allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen='' frameborder='0' height='360' src='https://www.youtube.com/embed/OY5AeGhgK7I?controls=0&amp;start=30' width='360'></iframe>
+<iframe allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen='' frameborder='0' height='360' src='https://www.youtube-nocookie.com/embed/OY5AeGhgK7I?start=30' width='360'></iframe>
+```

spec/usage/components/youtube_spec.rb

@@ -0,0 +1,33 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Youtube Component', type: :feature, js: true do
+
+  it 'Example 1' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          # simple youtube video
+          youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', class: 'iframe'
+          # youtube video with start_at and no_controls
+          youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', start_at: 30, no_controls: true
+          # youtube video with start_at and privacy_mode
+          youtube height: 360, width: 360, yt_id: 'OY5AeGhgK7I', start_at: 30, privacy_mode: true
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expect(page).to have_selector("iframe[src='https://www.youtube.com/embed/OY5AeGhgK7I'][class='iframe']")
+    expect(page).to have_selector("iframe[src='https://www.youtube.com/embed/OY5AeGhgK7I?controls=0&start=30']")
+    expect(page).to have_selector("iframe[src='https://www.youtube-nocookie.com/embed/OY5AeGhgK7I?start=30']")
+
+  end
+
+end