[Alli-6090] Add support for embedding video player on record page (vu…

…find-org#1445)

local/config/finna/config.ini.sample

@@ -1320,6 +1320,9 @@ url_blacklist[] = '/booky\.fi\/(image\.php\?|description\.php\?)/'
 ; the actual filename.
 ;poster_sources[kavi] = "http://www.elonet.fi/tenho/media/{filename}"
 
+; Whether to embed video in the record page.
+;embedVideo = true
+
 ; Whether the "versions" link and record tab are enabled. Default is false.
 ;display_versions = true
 

local/languages/finna/en-gb.ini

@@ -389,6 +389,7 @@ library_cards_instructions_html = ""
 Limit To = "Limit to"
 Limits = Limits
 Link to full results = "Link to full results"
+Link to video = "Link to video"
 Links = "Links"
 list_order_saved = "Sort order saved"
 Loading = "Loading"

local/languages/finna/fi.ini

@@ -376,6 +376,7 @@ library_card_recovery_email_url_pretext = "Klikkaa tätä linkkiä asettaaksesi
 library_cards_instructions_html = ""
 Limits = Rajaukset
 Link to full results = "Linkki koko tulokseen"
+Link to video = "Linkki videoon"
 Links = "Linkit"
 list_order_saved = "Järjestys tallennettu"
 Loading = "Ladataan"

local/languages/finna/sv.ini

@@ -372,6 +372,7 @@ library_card_recovery_email_url_pretext = "Vänligen klicka på denna länk för
 library_cards_instructions_html = ""
 Limits = "Begränsningar"
 Link to full results = "Länk till hela resultatet"
+Link to video = "Länk till video"
 Links = "Länkar"
 list_order_saved = "Sortering sparad"
 Loading = "Laddar"

module/Finna/src/Finna/View/Helper/Root/Config.php

@@ -0,0 +1,51 @@
+<?php
+/**
+ * Record driver view helper
+ *
+ * PHP version 7
+ *
+ * Copyright (C) Villanova University 2010.
+ * Copyright (C) The National Library of Finland 2015-2019.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ *
+ * @category VuFind
+ * @package  View_Helpers
+ * @author   Jaro Ravila <jaro.ravila@helsinki.fi>
+ * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
+ * @link     http://vufind.org/wiki/vufind2:developer_manual Wiki
+ */
+namespace Finna\View\Helper\Root;
+
+/**
+ * Config view helper
+ *
+ * @category VuFind
+ * @package  View_Helpers
+ * @author   Jaro Ravila <jaro.ravila@helsinki.fi>
+ * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
+ * @link     http://vufind.org/wiki/vufind2:developer_manual Wiki
+ */
+class Config extends \VuFind\View\Helper\Root\Config
+{
+    /**
+     * Is video embedding on record page enabled
+     *
+     * @return boolean
+     */
+    public function inlineVideoEnabled()
+    {
+        return !empty($this->get('config')->Record->embedVideo);
+    }
+}

module/Finna/src/Finna/View/Helper/Root/RecordLink.php

@@ -68,15 +68,40 @@ public function __construct(\VuFind\Record\Router $router, $config)
      */
     public function getEmbeddedVideo($url)
     {
-        if (preg_match(
-            '/^https?:\/\/(www\.)?(youtube\.com\/watch\?|youtu\.?be\/)\w+/', $url
-        ) || preg_match('/^https?:\/\/vimeo\.com\/\d+/', $url)
-        ) {
+        if ($this->getEmbeddedVideoUrl($url)) {
             return 'data-embed-iframe';
         }
         return '';
     }
 
+    /**
+     * Returns url for video embedding if url is vimeo or youtube url
+     *
+     * @param string $url record url
+     *
+     * @return string
+     */
+    public function getEmbeddedVideoUrl($url)
+    {
+        $parts = parse_url($url);
+        $embedUrl = '';
+        switch ($parts['host']) {
+        case 'vimeo.com':
+            $embedUrl = "https://player.vimeo.com/video" . $parts['path'];
+            break;
+        case 'youtu.be':
+            $embedUrl = "https://www.youtube.com/embed" . $parts['path'];
+            break;
+        case 'youtube.com':
+            parse_str($parts['query'], $query);
+            $embedUrl = "https://www.youtube.com/embed/" . $query['v'];
+            break;
+        default:
+            $embedUrl = '';
+        }
+        return $embedUrl;
+    }
+
     /**
      * Given an array representing a related record (which may be a bib ID or OCLC
      * number), this helper renders a URL linking to that record.

themes/finna2/js/finna-video-popup.js

@@ -137,18 +137,24 @@ finna.videoPopup = (function finnaVideoPopup() {
       });
   }
 
-  function initVideoPopup(_container) {
-    var container = typeof _container === 'undefined' ? $('body') : $(_container);
-
-    container.find('[data-embed-video]').click(function onClickVideoLink(e) {
-      var videoSources = $(this).data('videoSources');
-      var scripts = $(this).data('scripts');
-      var posterUrl = $(this).data('posterUrl');
-
+  function displayVideo(video) {
+    var videoSources = video.data('videoSources');
+    var scripts = video.data('scripts');
+    var posterUrl = video.data('posterUrl');
+    var videoPlayer = "<video id='video-player' class='video-js video-js-player vjs-big-play-centered' controls></video>";
+    if ($('[data-inline]').length > 0) {
+      $('.inline-video').html(videoPlayer);
+      $('[data-inline].active-video').removeClass('active-video');
+      video.addClass('active-video');
+      finna.layout.loadScripts(scripts, function onScriptsLoaded() {
+        initVideoJs('.inline-video', videoSources, posterUrl);
+      });
+      $('.vjs-big-play-button').focus();
+    } else {
       $.magnificPopup.open({
         type: 'inline',
         items: {
-          src: "<div class='video-popup'><video id='video-player' class='video-js vjs-big-play-centered' controls></video></div>"
+          src: "<div class='video-popup'>" + videoPlayer + "</div>"
         },
         callbacks: {
           open: function onOpen() {
@@ -165,29 +171,45 @@ finna.videoPopup = (function finnaVideoPopup() {
           }
         }
       });
-      e.preventDefault();
-    });
+    }
   }
 
-  function initIframeEmbed(_container) {
-    var container = typeof _container === 'undefined' ? $('body') : _container;
+  function initVideoPopup(_container) {
+    var container = typeof _container === 'undefined' ? $('body') : $(_container);
 
-    container.find('[data-embed-iframe]').click(function onClickEmbedLink(e) {
-      if (typeof $.magnificPopup.instance !== 'undefined' && $.magnificPopup.instance.isOpen) {
-        // Close existing popup (such as image-popup) first without delay so that its
-        // state doesn't get confused by the immediate reopening.
-        $.magnificPopup.instance.st.removalDelay = 0;
-        $.magnificPopup.close();
+    container.find('[data-embed-video]').click(function onClickVideoLink(e) {
+      displayVideo($(this));
+      e.preventDefault();
+    });
+
+    if (container.find('[data-inline]').length > 0) {
+      var defaultVideo = container.find('[data-inline]').first();
+      $('.inline-video-container').insertAfter($('.search-form-container'));
+      $('.inline-video-container').removeClass('hidden');
+      if (container.find('[data-inline]').length < 2 ) {
+        container.find('[data-inline]').addClass('hidden');
       }
+      displayVideo(defaultVideo);
+    }
+  }
 
-      // Fallback if core has older style of initializing a video button
-      var attr = $(this).is('a') ? $(this).attr('href') : $(this).data('link');
+  function displayIframe(video) {
+    var source = video.is('a') ? video.attr('href') : video.data('link');
+    if ($('[data-inline-iframe]').length) {
+      var embedUrl = video.data('embed-url');
+      var player = '<iframe class="embed-responsive-item" src="' + embedUrl + '" allowfullscreen>';
+      $('.inline-video').html(player);
 
+      // If using Chrome + VoiceOver, Chrome crashes if vimeo player video settings button has aria-haspopup=true
+      $('.vp-prefs .js-prefs').attr('aria-haspopup', false);
+      $('[data-inline-iframe].active-video').removeClass('active-video');
+      video.addClass('active-video');
+    } else {
       $.magnificPopup.open({
         type: 'iframe',
         tClose: VuFind.translate('close'),
         items: {
-          src: attr
+          src: source
         },
         iframe: {
           markup: '<div class="mfp-iframe-scaler">'
@@ -210,9 +232,31 @@ finna.videoPopup = (function finnaVideoPopup() {
           }
         }
       });
+    }
+  }
+  function initIframeEmbed(_container) {
+    var container = typeof _container === 'undefined' ? $('body') : _container;
+
+    container.find('[data-embed-iframe]').click(function onClickEmbedLink(e) {
+      if (typeof $.magnificPopup.instance !== 'undefined' && $.magnificPopup.instance.isOpen) {
+        // Close existing popup (such as image-popup) first without delay so that its
+        // state doesn't get confused by the immediate reopening.
+        $.magnificPopup.instance.st.removalDelay = 0;
+        $.magnificPopup.close();
+      }
+      displayIframe($(this));
       e.preventDefault();
       return false;
     });
+    if (container.find('[data-inline-iframe]').length > 0) {
+      var defaultVideo = container.find('[data-inline-iframe]').first();
+      $('.inline-video-container').insertAfter($('.search-form-container'));
+      $('.inline-video-container').removeClass('hidden');
+      if (container.find('[data-inline-iframe]').length < 2 ) { 
+        container.find('[data-inline-iframe]').addClass('hidden');
+      }
+      displayIframe(defaultVideo);
+    }
   }
 
   var my = {

themes/finna2/less/finna/record.less

@@ -78,9 +78,6 @@
       }
     }
   }
-  .video-link-container {
-    margin-bottom: 10px;
-  }
   button.videourl {
     display: flex;
     align-items: center;
@@ -209,10 +206,6 @@ a.authority {
       }
     }
   }
-  .video-link-container {
-    width: 100%;
-    padding-right: 10px;
-  }
   .smaller-image-sidebar {
     display: none;
   }

themes/finna2/less/finna/video-player.less

@@ -13,7 +13,69 @@
   outline: none;
 }
 
-.video-js {
-  width: 100%;
+.video-js-player {
   height: 100%;
+  width: 100%;
+}
+.inline-video-container {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  margin-left: -50vw;
+  background-color: black;
+  .inline-video {
+    height: 400px;
+    .embed-responsive-item {
+      height: 100%;
+      width: 100%;
+    }
+  }
+  .video-accordion {
+    padding-top: 15px;
+  }
+  .video-buttons {
+    background-color: @gray-ultralight;
+  }
+  .video-link-container {
+    width: 200px;
+  }
+}
+
+.video-accordion {
+  .video-link-container {
+    border: 1px solid @gray-ultralight;
+    border-bottom: 0;
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 15px;
+    margin-right: 15px;
+    padding-bottom: 0px;
+    padding-left: 0px;
+    text-align: left;
+    background-color: white;
+    box-shadow: 2px 4px 3px @gray-lighter;
+    @media (max-width: @screen-xs-max) {
+      width: 100%;
+    }
+    i {
+      padding: 5px;
+      font-size: 2.5em;
+      background-color: @gray-light;
+      color: white;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .video-desc {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+  .active-video {
+    color: @brand-primary;
+    i {
+      background-color: @brand-primary;
+      color: white;
+    }
+  }
 }