workarea-product_videos 1.2.2

data/app/assets/javascripts/workarea/storefront/product_videos/modules/vimeo_api.js

@@ -0,0 +1,81 @@
+/**
+ * @namespace WORKAREA.vimeoApi
+ */
+WORKAREA.registerModule('vimeoApi', (function () {
+    'use strict';
+
+    var getAnalyticsLabel = function(iframe) {
+            var iframeSrc = iframe.attr('src').split('?')[0],
+                label = iframeSrc;
+
+            if (iframe.data('title')) {
+                label += ' (' + iframe.data('title') + ')';
+            } else if (iframe.attr('title')) {
+                label += ' (' + iframe.attr('title') + ')';
+            }
+
+            return label;
+        },
+
+        sendEvent = function (id, action) {
+            var iframe = $('#' + id),
+                label = getAnalyticsLabel(iframe);
+
+            WORKAREA.analytics.fireCallback(
+                'vimeo',
+                {
+                    'eventCategory': 'Vimeo',
+                    'eventAction': action,
+                    'eventLabel': label,
+                    'eventValue': undefined
+                }
+            );
+        },
+
+        muteVideo = function (player) {
+            player.setVolume(0);
+        },
+
+        onPlay = function (playerData) {
+            sendEvent(playerData.player_id, 'Play Video');
+        },
+
+        onPause = function (playerData) {
+            sendEvent(playerData.player_id, 'Paused video');
+        },
+
+        onFinish = function (playerData) {
+            sendEvent(playerData.player_id, 'Completed video');
+        },
+
+        setupPlayer = function (index, iframe) {
+            var player = new Vimeo.Player(iframe),
+                playerData = $(iframe).data('vimeoApi');
+
+            if (playerData.mute === 'true') {
+                muteVideo(player);
+            }
+
+            player.on('play', _.partial(onPlay, playerData));
+            player.on('pause', _.partial(onPause, playerData));
+            player.on('finish', _.partial(onFinish, playerData));
+        },
+
+        injectSDK = _.once(function($vimeoIframes) {
+            $.getScript('https://player.vimeo.com/api/player.js', function() {
+                $vimeoIframes.each(setupPlayer);
+            });
+        }),
+
+        init = function ($scope) {
+            var $vimeoIframes = $('[data-vimeo-api]', $scope);
+
+            if (_.isEmpty($vimeoIframes)) { return; }
+
+            injectSDK($vimeoIframes);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/product_videos/modules/youtube_api.js

@@ -0,0 +1,124 @@
+/**
+ * @namespace WORKAREA.youtubeApi
+ */
+WORKAREA.registerModule('youtubeApi', (function () {
+    'use strict';
+
+    var getAnalyticsLabel = function(iframe) {
+            var iframeSrc = iframe.attr('src').split('?')[0],
+                label = iframeSrc;
+
+            if (iframe.data('title')) {
+                label += ' (' + iframe.data('title') + ')';
+            } else if (iframe.attr('title')) {
+                label += ' (' + iframe.attr('title') + ')';
+            }
+
+            return label;
+        },
+
+        sendEvent = function (id, action) {
+            var iframe = $('#' + id),
+                label = getAnalyticsLabel(iframe);
+
+            WORKAREA.analytics.fireCallback(
+                'youtube',
+                {
+                    'eventCategory': 'Youtube',
+                    'eventAction': action,
+                    'eventLabel': label,
+                    'eventValue': undefined
+                }
+            );
+        },
+
+        onPlay = function (playerId) {
+            sendEvent(playerId, 'Play Video');
+        },
+
+        onPause = function (playerId) {
+            sendEvent(playerId, 'Paused video');
+        },
+
+        onFinish = function (playerId) {
+            sendEvent(playerId, 'Completed video');
+        },
+
+        handlePlayerState = function(playerId, state) {
+            var stateMap = {
+                    '-1': 'unstarted',
+                    '0': 'ended',
+                    '1': 'playing',
+                    '2': 'paused',
+                    '3': 'buffering',
+                    '5': 'queued'
+                },
+                currentState = stateMap[state.data];
+
+            if (currentState === 'playing') {
+                onPlay(playerId);
+            } else if (currentState === 'paused') {
+                onPause(playerId);
+            } else if (currentState === 'ended') {
+                onFinish(playerId);
+            }
+        },
+
+        onPlayerReady = function (playerData, event) {
+            var player = event.target;
+
+            if (playerData.mute === 'true') {
+                player.mute();
+            }
+        },
+
+        setupPlayer = function (index, iframe) {
+            var playerData = $(iframe).data('youtubeApi'),
+                playerId = $(iframe).attr('id'),
+                player = new YT.Player(playerId, {
+                    events: {
+                        'onReady': _.partial(onPlayerReady, playerData),
+                        'onStateChange': _.partial(handlePlayerState, playerId)
+                    }
+                });
+
+            return player;
+        },
+
+        scriptLoaded = function ($scope) {
+            var $youtubeIframes = $('[data-youtube-api]', $scope);
+
+            $youtubeIframes.each(setupPlayer);
+        },
+
+        injectSDK = function () {
+            if ($('[data-youtube-api]').data('youtube-api-loaded')) {
+                return;
+            } else {
+                $.getScript('https://www.youtube.com/player_api');
+            }
+        },
+
+        init = function ($scope) {
+            var $youtubeIframes = $('[data-youtube-api]', $scope);
+
+            if (_.isEmpty($youtubeIframes)) { return; }
+
+            injectSDK();
+        };
+
+    return {
+        init: init,
+        scriptLoaded: scriptLoaded
+    };
+}()));
+
+/**
+ * onYouTubeIframeAPIReady is called by YouTube API
+ * This is executed when the API is ready to go.
+ */
+/*eslint no-unused-vars: 0 */
+function onYouTubeIframeAPIReady() {
+    $('[data-youtube-api]').data('youtube-api-loaded', true);
+    WORKAREA.youtubeApi.scriptLoaded($(document));
+}

data/app/assets/stylesheets/workarea/storefront/product_videos/components/_product_video.scss

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #PRODUCT-VIDEO
+\*------------------------------------*/
+
+
+$product-video-padding:                 56.25% !default; // 16:9 aspect
+$product-video-width:                   80vw !default;
+$product-video-max-width:               1080px !default;
+
+
+.product-video {
+    position: relative;
+    margin: 0 auto;
+}
+
+.product-video--thumbnail {}
+
+    .product-video__container {
+        position: relative;
+        padding-bottom: $product-video-padding;
+        width: $product-video-width;
+        max-width: $product-video-max-width;
+    }
+
+        .product-video__iframe {
+            position: absolute;
+            width:  100%;
+            height: 100%;
+        }
+
+    .product-video__dialog-link {}
+
+    .product-video__thumbnail-image {}
+
+    .product-video__play-icon {
+        @include center;
+    }

data/app/controllers/workarea/admin/catalog_product_videos_controller.rb

@@ -0,0 +1,52 @@
+module Workarea
+  class Admin::CatalogProductVideosController < Admin::ApplicationController
+    required_permissions :catalog
+    before_action :find_product
+
+    def index
+      @videos = @product.videos
+    end
+
+    def new; end
+
+    def create
+      @video = @product.videos.build(params[:video])
+
+      if @video.save
+        flash[:success] = t("workarea.admin.catalog_product_videos.flash_messages.created")
+        redirect_to catalog_product_videos_path(@product)
+      else
+        render :index, status: :unprocessable_entity
+      end
+    end
+
+    def edit
+      @video = @product.videos.find(params[:id])
+    end
+
+    def update
+      @video = @product.videos.find(params[:id])
+
+      if @video.update_attributes(params[:video])
+        flash[:success] = t("workarea.admin.catalog_product_videos.flash_messages.updated")
+      else
+        flash[:error] = t("workarea.admin.catalog_product_videos.flash_messages.error")
+      end
+
+      redirect_to catalog_product_videos_path(@product)
+    end
+
+    def destroy
+      @product.videos.find(params[:id]).destroy
+      flash[:success] = t("workarea.admin.catalog_product_videos.flash_messages.deleted")
+      redirect_to catalog_product_videos_path(@product)
+    end
+
+    private
+
+      def find_product
+        model = Catalog::Product.find_by(slug: params[:catalog_product_id])
+        @product = Admin::ProductViewModel.wrap(model, view_model_options)
+      end
+  end
+end

data/app/controllers/workarea/storefront/products_controller.decorator

@@ -0,0 +1,19 @@
+module Workarea
+  decorate Storefront::ProductsController, with: :product_videos do
+    def video
+      model = Catalog::Product.find_by(id: params[:product_id])
+      raise InvalidDisplay unless model.active? || current_user.try(:admin?)
+
+      @product = Storefront::ProductViewModel.wrap(
+        model,
+        view_model_options
+      )
+
+      video = @product.videos.detect{ |v| v.id.to_s == params[:video_id] }
+      @video = Storefront::ProductVideoViewModel.wrap(
+        video,
+        view_model_options
+      )
+    end
+  end
+end

data/app/models/workarea/catalog/product.decorator

@@ -0,0 +1,7 @@
+module Workarea
+  decorate Catalog::Product, with: :product_videos do
+    decorated do
+      embeds_many :videos, class_name: 'Workarea::Catalog::ProductVideo'
+    end
+  end
+end

data/app/models/workarea/catalog/product_video.rb

@@ -0,0 +1,32 @@
+module Workarea
+  module Catalog
+    class ProductVideo
+      include ApplicationDocument
+
+      field :embed_code, type: String
+      field :display_option, type: String, default: "dialog"
+      field :embed_id, type: String
+      field :url, type: String
+      field :host, type: String
+      field :aspect_ratio, type: String
+      field :thumbnail, type: String
+
+      embedded_in :product,
+                  class_name: "Workarea::Catalog::Product",
+                  inverse_of: :videos,
+                  touch:      true
+
+      validates :embed_code, presence: true
+      validates :display_option, presence: true
+      validates :embed_id, presence: true
+      validates :url, presence: true
+      validates :host, presence: true
+      validates :aspect_ratio, presence: true
+      before_validation :process_embed_code
+
+      def process_embed_code
+        VideoEmbedParser.new(self.embed_code).video_params.each { |key, value| self[key] = value }
+      end
+    end
+  end
+end

data/app/services/workarea/video_embed_parser.rb

@@ -0,0 +1,54 @@
+module Workarea
+  class VideoEmbedParser
+    def initialize(embed_code, options = {})
+      @parsed_embed_code = Nokogiri::HTML.fragment(embed_code).children.first
+      @options = options
+    end
+
+    def video_params
+      {
+        embed_id: embed_id,
+        url: url,
+        host: uri.host,
+        aspect_ratio: aspect_ratio
+      }
+    end
+
+    private
+
+      def vimeo?
+        /vimeo/.match?(host)
+      end
+
+      def youtube?
+        /youtube/.match(host)
+      end
+
+      def url
+        @url ||= @parsed_embed_code.attribute("src").value
+      end
+
+      def uri
+        URI.parse(url)
+      end
+
+      def host
+        uri.host
+      end
+
+      def embed_id
+        id = uri.path.split("/").last
+        if youtube?
+          id = "youtube-#{id}"
+        end
+        id
+      end
+
+      def aspect_ratio
+        height = @parsed_embed_code.attribute("height").value
+        width = @parsed_embed_code.attribute("width").value
+        ratio = (height.to_f / width.to_f) * 100
+        ratio.round(2)
+      end
+  end
+end

data/app/view_models/workarea/storefront/product_video_view_model.rb

@@ -0,0 +1,84 @@
+module Workarea
+  module Storefront
+    class ProductVideoViewModel < ApplicationViewModel
+      def iframe_attrs
+        attrs = {
+          id: model.embed_id,
+          frameborder: "0",
+          allowfullscreen: "",
+          container_style: "padding-bottom: #{model.aspect_ratio}%"
+        }
+
+        if vimeo?
+          attrs.merge(vimeo_attrs)
+        elsif youtube?
+          attrs.merge(youtube_attrs)
+        end
+      end
+
+      def thumbnail
+        return unless model.thumbnail.present?
+        @thumbnail ||= Workarea::Content::Asset.find_or_initialize_by(id: model.thumbnail)
+      end
+
+      private
+
+        def vimeo?
+          /vimeo/.match?(host)
+        end
+
+        def youtube?
+          /youtube/.match?(host)
+        end
+
+        def vimeo_attrs
+          {
+            src: "#{model.url}?#{vimeo_url_params}",
+            webkitallowfullscreen: "",
+            mozallowfullscreen: "",
+            data: {
+              vimeo_api: {
+                player_id: model.embed_id,
+                mute: @options[:mute]
+              }.to_json
+            }
+          }
+        end
+
+        def youtube_attrs
+          {
+            src: "#{url}?#{youtube_url_params}",
+            data: {
+              youtube_api: {
+                mute: @options[:mute]
+              }.to_json
+            }
+          }
+        end
+
+        def uri
+          URI.parse(model.url)
+        end
+
+        def vimeo_url_params
+          parsed_query = Rack::Utils.parse_query(uri.query)
+          parsed_query["api"] = 1
+          parsed_query["autoplay"] = @options[:autoplay]
+          parsed_query["loop"] = @options[:loop_playback]
+          parsed_query["player_id"] = model.embed_id
+
+          URI.encode_www_form(parsed_query)
+        end
+
+        def youtube_url_params
+          parsed_query = Rack::Utils.parse_query(uri.query)
+          parsed_query["enablejsapi"] = 1
+          parsed_query["autoplay"] = @options[:autoplay] ? 1 : 0
+          parsed_query["loop"] = @options[:loop_playback] ? 1 : 0
+          parsed_query["videoId"] = model.embed_id
+
+          URI.encode_www_form(parsed_query)
+        end
+    end
+  end
+end

data/app/view_models/workarea/storefront/product_view_model.decorator

@@ -0,0 +1,9 @@
+module Workarea
+  decorate Storefront::ProductViewModel, with: :product_videos do
+    def videos
+      @videos ||= Storefront::ProductVideoViewModel.wrap(
+        model.videos
+      )
+    end
+  end
+end

data/app/views/workarea/admin/catalog_product_videos/edit.html.haml

@@ -0,0 +1,76 @@
+- @page_title = t('workarea.admin.catalog_product_videos.edit.title', product: @product.name)
+
+.product-images.view
+  .view__header
+    .grid.grid--middle
+      .grid__cell.grid__cell--25
+        = render 'workarea/admin/releases/select'
+      .grid__cell.grid__cell--50
+        .view__heading
+          = link_to_index_for(@product)
+          %h1= link_to @product.name, url_for(@product)
+      .grid__cell.grid__cell--25
+        = render_aux_navigation_for(@product)
+
+  .view__container
+    = render_cards_for(@product, :videos)
+
+    .section
+      %h2.view__heading= t('workarea.admin.catalog_product_videos.edit.heading')
+
+      %h3= t('workarea.admin.catalog_product_videos.edit.extracted_data')
+      %table
+        %thead
+          %tr
+            %th= t('workarea.admin.catalog_product_videos.fields.video_id')
+            %th= t('workarea.admin.catalog_product_videos.fields.host')
+            %th= t('workarea.admin.catalog_product_videos.fields.url')
+            %th= t('workarea.admin.catalog_product_videos.fields.aspect_ratio')
+        %tbody
+          %tr
+            %td= @video.embed_id
+            %td= @video.host
+            %td= link_to @video.url, @video.url, target: '_blank', rel: 'noopener'
+            %td= @video.aspect_ratio
+      .grid
+        .grid__cell.grid__cell--33
+          = form_tag catalog_product_video_path(@product, @video), method: :patch, class: 'product-videos__action-group-item' do
+            .property.property--required
+              = label_tag 'video_embed_code', class: 'property__name' do
+                %span.property__text= t('workarea.admin.catalog_product_videos.fields.embed_code')
+              = text_area_tag 'video[embed_code]', @video.embed_code, class: 'text-box text-box--i18n text-box--multi-line', required: true
+            .property.property--required
+              = label_tag 'video_display_option', class: 'property__name' do
+                %span.property__text= t('workarea.admin.catalog_product_videos.fields.display_type')
+                = link_to '#display-type-info', data: { tooltip: '' } do
+                  = inline_svg('workarea/admin/icons/help.svg', class: 'svg-icon svg-icon--small svg-icon--blue', title: t('workarea.admin.catalog_product_videos.fields.display_type'))
+              #display-type-info.tooltip-content
+                %p= t('workarea.admin.catalog_product_videos.fields.display_type_info_html')
+              = select_tag 'video[display_option]', options_for_select(Workarea.config.product_videos[:display_options], @video.display_option), id: 'video_display_option', required: true
+
+            .property
+              = label_tag 'video_thumbnail', class: 'property__name' do
+                %span.property__text= t('workarea.admin.catalog_product_videos.fields.thumbnail')
+
+              .asset-picker-field{ data: { asset_picker_field: '' } }
+                .asset-picker-field__cell
+                  = hidden_field_tag 'video[thumbnail]', @video.thumbnail, id: 'video_thumbnail', class: 'text-box text-box--i18n'
+
+                  %span{ data: { asset_name: true } }
+                    - asset = Workarea::Content::Asset.find_or_initialize_by(id: @video.thumbnail)
+                    = asset.name.presence || t('workarea.admin.content_blocks.asset.name_missing')
+
+                .asset-picker-field__cell= link_to t('workarea.admin.content_blocks.asset.select_an_asset'), insert_content_assets_path(file_type: 'image'), class: 'text-button', data: { asset_picker_field_open: '', turbolinks: false }
+                - if asset.name.present?
+                  .asset-picker-field__cell= button_tag t('workarea.admin.content_blocks.asset.clear_asset'), type: 'button', value: 'clear_asset', id: nil, class: 'text-button text-button--destroy', data: { asset_picker_field_clear: '' }
+
+
+            .workflow-bar
+              .grid.grid--right.grid--middle
+                .grid__cell.grid__cell--20
+                  = link_to t('workarea.admin.form.cancel'), url_for(@product), class: 'workflow-bar__button workflow-bar__button--delete'
+
+                .grid__cell.grid__cell--80
+                  .grid.grid--auto.grid--right.grid--middle
+                    .grid__cell
+                      = button_tag t('workarea.admin.catalog_product_videos.edit.update_button'), value: 'edit_video', class: 'workflow-bar__button workflow-bar__button--update'

data/app/views/workarea/admin/catalog_product_videos/index.html.haml

@@ -0,0 +1,46 @@
+- @page_title = t('workarea.admin.catalog_product_videos.index.title', product: @product.name)
+
+.product-images.view
+  .view__header
+    .grid.grid--middle
+      .grid__cell.grid__cell--25
+        = render 'workarea/admin/releases/select'
+      .grid__cell.grid__cell--50
+        .view__heading
+          = link_to_index_for(@product)
+          %h1= link_to @product.name, url_for(@product)
+      .grid__cell.grid__cell--25
+        = render_aux_navigation_for(@product)
+
+  .view__container
+    = render_cards_for(@product, :videos)
+
+    .section
+      %h2.view__heading= t('workarea.admin.catalog_product_videos.index.heading')
+      %table.index-table
+        %thead
+          %tr
+            %th= t('workarea.admin.catalog_product_videos.fields.video_id')
+            %th= t('workarea.admin.catalog_product_videos.fields.host')
+            %th= t('workarea.admin.catalog_product_videos.fields.display_type')
+            %th
+        %tbody
+          - @product.videos.each do |video|
+            %tr.index-table__row
+              %td= link_to video[:embed_id], edit_catalog_product_video_path(@product, video)
+              %td= video[:host]
+              %td= video.display_option
+              %td
+                = form_tag catalog_product_video_path(@product, video), method: 'delete', class: 'text-button text-button--destroy' do
+                  = button_tag value: 'delete_video', class: 'text-button text-button--destroy' do
+                    = inline_svg('workarea/admin/icons/delete.svg', class: 'text-button__icon', title: t('workarea.admin.actions.delete'))
+
+        .workflow-bar
+          .grid.grid--right.grid--middle
+            .grid__cell.grid__cell--20
+              = link_to t('workarea.admin.form.cancel'), url_for(@product), class: 'workflow-bar__button workflow-bar__button--delete'
+
+            .grid__cell.grid__cell--80
+              .grid.grid--auto.grid--right.grid--middle
+                .grid__cell
+                  = link_to t('workarea.admin.catalog_product_videos.index.add_new'), new_catalog_product_video_path(@product), class: 'workflow-bar__button workflow-bar__button--create'

data/app/views/workarea/admin/catalog_product_videos/new.html.haml

@@ -0,0 +1,57 @@
+- @page_title = t('workarea.admin.catalog_product_videos.new.title', product: @product.name)
+
+.product-images.view
+  .view__header
+    .grid.grid--middle
+      .grid__cell.grid__cell--25
+        = render 'workarea/admin/releases/select'
+      .grid__cell.grid__cell--50
+        .view__heading
+          = link_to_index_for(@product)
+          %h1= link_to @product.name, url_for(@product)
+      .grid__cell.grid__cell--25
+        = render_aux_navigation_for(@product)
+
+  .view__container
+    = render_cards_for(@product, :videos)
+
+    .section
+      %h2.view__heading= t('workarea.admin.catalog_product_videos.new.heading')
+      .grid
+        .grid__cell.grid__cell--33
+          = form_tag catalog_product_videos_path(@product), method: 'post', multipart: true do
+            .property.property--required
+              = label_tag 'video_embed_code', class: 'property__name' do
+                %span.property__text= t('workarea.admin.catalog_product_videos.fields.embed_code')
+              = text_area_tag 'video[embed_code]', nil, class: 'text-box text-box--i18n text-box--multi-line', required: true
+            .property.property--required
+              = label_tag 'video_display_option', class: 'property__name' do
+                %span.property__text= t('workarea.admin.catalog_product_videos.fields.display_type')
+                = link_to '#display-type-info', data: { tooltip: '' } do
+                  = inline_svg('workarea/admin/icons/help.svg', class: 'svg-icon svg-icon--small svg-icon--blue', title: t('workarea.admin.catalog_product_videos.fields.display_type'))
+                #display-type-info.tooltip-content
+                  %p= t('workarea.admin.catalog_product_videos.fields.display_type_info_html')
+              .value= select_tag 'video[display_option]', options_for_select(Workarea.config.product_videos[:display_options]), id: 'video_display_option', required: true
+
+            .property
+              = label_tag 'video_thumbnail', class: 'property__name' do
+                %span.property__text= t('workarea.admin.catalog_product_videos.fields.thumbnail')
+
+              .asset-picker-field{ data: { asset_picker_field: '' } }
+                .asset-picker-field__cell
+                  = hidden_field_tag 'video[thumbnail]', nil, id: 'video_thumbnail', class: 'text-box text-box--i18n'
+
+                  %span{ data: { asset_name: true } }
+                    = t('workarea.admin.content_blocks.asset.name_missing')
+
+                .asset-picker-field__cell= link_to t('workarea.admin.content_blocks.asset.select_an_asset'), insert_content_assets_path(file_type: 'image'), class: 'text-button', data: { asset_picker_field_open: '', turbolinks: false }
+
+            .workflow-bar
+              .grid.grid--right.grid--middle
+                .grid__cell.grid__cell--20
+                  = link_to t('workarea.admin.form.cancel'), url_for(@product), class: 'workflow-bar__button workflow-bar__button--delete'
+
+                .grid__cell.grid__cell--80
+                  .grid.grid--auto.grid--right.grid--middle
+                    .grid__cell
+                      = button_tag t('workarea.admin.catalog_product_videos.new.button'), value: 'create_video', class: 'workflow-bar__button workflow-bar__button--create'