Merge pull request #2816 from justcarakas/2791-youtube-in-media-galle…

…ry-not-working Fix youtube and vimeo in the media gallery
forkcms · Jun 26, 2019 · c675d69 · c675d69
2 parents c862654 + b61cfdb
commit c675d69
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 12 deletions.
diff --git a/src/Backend/Modules/MediaLibrary/Component/StorageProvider/LocalStorageProvider.php b/src/Backend/Modules/MediaLibrary/Component/StorageProvider/LocalStorageProvider.php
@@ -70,6 +70,11 @@ public function getWebPath(MediaItem $mediaItem): string
         return $this->getWebDir() . '/' . $mediaItem->getFullUrl();
     }
 
+    public function getThumbnail(MediaItem $mediaItem): string
+    {
+        return $this->getWebPath($mediaItem);
+    }
+
     public function getWebPathWithFilter(MediaItem $mediaItem, string $liipImagineBundleFilter = null): string
     {
         $webPath = $this->getWebPath($mediaItem);

diff --git a/src/Backend/Modules/MediaLibrary/Component/StorageProvider/MovieStorageProvider.php b/src/Backend/Modules/MediaLibrary/Component/StorageProvider/MovieStorageProvider.php
@@ -42,4 +42,9 @@ public function getWebPath(MediaItem $mediaItem): string
     {
         return $this->linkUrl . $mediaItem->getUrl();
     }
+
+    public function getThumbnail(MediaItem $mediaItem): string
+    {
+        return $this->getWebPath($mediaItem);
+    }
 }
diff --git a/src/Backend/Modules/MediaLibrary/Component/StorageProvider/StorageProviderInterface.php b/src/Backend/Modules/MediaLibrary/Component/StorageProvider/StorageProviderInterface.php
@@ -15,4 +15,6 @@ public function getIncludeHTML(MediaItem $mediaItem): string;
     public function getLinkHTML(MediaItem $mediaItem): string;
 
     public function getWebPath(MediaItem $mediaItem): string;
+
+    public function getThumbnail(MediaItem $mediaItem): string;
 }
diff --git a/src/Backend/Modules/MediaLibrary/Component/StorageProvider/VimeoStorageProvider.php b/src/Backend/Modules/MediaLibrary/Component/StorageProvider/VimeoStorageProvider.php
@@ -8,6 +8,17 @@ class VimeoStorageProvider extends MovieStorageProvider
 {
     public function getIncludeHTML(MediaItem $mediaItem): string
     {
-        return '<iframe src="' . $this->includeUrl . $mediaItem->getUrl() . '?color=ffffff&title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
+        return '<iframe src="' . $this->includeUrl . $mediaItem->getUrl() . '?color=ffffff&title=0&byline=0&portrait=0&badge=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
+    }
+
+    public function getThumbnail(MediaItem $mediaItem): string
+    {
+        $data = file_get_contents('https://vimeo.com/api/v2/video/' . $mediaItem->getUrl() . '.json');
+        $data = json_decode($data, true);
+
+        $thumbnailUrl = $data[0]['thumbnail_large'] ?? $data[0]['thumbnail_medium'] ?? $data[0]['thumbnail_small'];
+
+        // fix not secure thumbnails
+        return str_replace('http://', 'https://', $thumbnailUrl);
     }
 }
diff --git a/src/Backend/Modules/MediaLibrary/Component/StorageProvider/YoutubeStorageProvider.php b/src/Backend/Modules/MediaLibrary/Component/StorageProvider/YoutubeStorageProvider.php
@@ -8,6 +8,11 @@ class YoutubeStorageProvider extends MovieStorageProvider
 {
     public function getIncludeHTML(MediaItem $mediaItem): string
     {
-        return '<iframe width="560" height="315" src="' . $this->includeUrl . $mediaItem->getUrl() . '" frameborder="0" allowfullscreen></iframe>';
+        return '<iframe width="100%" height="100%" src="' . $this->includeUrl . $mediaItem->getUrl() . '" frameborder="0" allowfullscreen></iframe>';
+    }
+
+    public function getThumbnail(MediaItem $mediaItem): string
+    {
+        return 'https://img.youtube.com/vi/' . $mediaItem->getUrl() . '/maxresdefault.jpg';
     }
 }
diff --git a/src/Backend/Modules/MediaLibrary/Domain/MediaItem/MediaItem.php b/src/Backend/Modules/MediaLibrary/Domain/MediaItem/MediaItem.php
@@ -461,6 +461,18 @@ public function getWebPath(string $liipImagineBundleFilter = null): string
         return $storage->getWebPathWithFilter($this, $liipImagineBundleFilter);
     }
 
+    public function getThumbnail(string $liipImagineBundleFilter = null): string
+    {
+        /** @var StorageProviderInterface $storage */
+        $storage = Model::get('media_library.manager.storage')->getStorageProvider($this->getStorageType());
+
+        if (!$storage instanceof LiipImagineBundleStorageProviderInterface || $liipImagineBundleFilter === null) {
+            return $storage->getThumbnail($this);
+        }
+
+        return $storage->getWebPathWithFilter($this, $liipImagineBundleFilter);
+    }
+
     private function refreshAspectRatio(): void
     {
         if ($this->height === null || $this->width === null) {

diff --git a/src/Backend/Modules/MediaLibrary/Layout/Css/MediaLibrary.css b/src/Backend/Modules/MediaLibrary/Layout/Css/MediaLibrary.css
@@ -131,6 +131,11 @@
       width: 100%;
       word-wrap: break-word;
     }
+    .mediaHolderMovie {
+      height: 90px;
+      width: 140px;
+      background-size: cover;
+    }
     .mediaHolderImage img {
       width: 140px;
       height: 90px;

diff --git a/src/Backend/Modules/MediaLibrary/Resources/views/FormLayout.html.twig b/src/Backend/Modules/MediaLibrary/Resources/views/FormLayout.html.twig
@@ -18,8 +18,7 @@
               <ul class="mediaConnectedItems ui-sortable">
                 {% for connectedItem in mediaGroup.connectedItems %}
                   <li id="media-{{ connectedItem.item.id }}" data-folder-id="{{ connectedItem.item.folder.id }}" class="ui-state-default">
-                    <div class="mediaHolder mediaHolder{{ connectedItem.item.type|ucfirst }}">
-
+                    <div class="mediaHolder mediaHolder{{ connectedItem.item.type|ucfirst }}"{% if connectedItem.item.type.isMovie %} style="background-image: url('{{ connectedItem.item.thumbnail() }}')"{% endif %}>
                       {# Audio #}
                       {% if connectedItem.item.type.isAudio %}
                         <div class="icon"></div>
@@ -40,7 +39,6 @@
                       {# Movie #}
                       {% if connectedItem.item.type.isMovie %}
                         <div class="icon"></div>
-                        <div class="url">{{ connectedItem.item.url }}</div>
                       {% endif %}
 
                     </div>

diff --git a/src/Frontend/Modules/MediaLibrary/Js/Lightbox.js b/src/Frontend/Modules/MediaLibrary/Js/Lightbox.js
@@ -7,15 +7,18 @@ var initPhotoSwipeFromDOM = function (gallerySelector) {
     var numNodes = thumbElements.length
     var items = []
     var figureEl
+    var $figureEl
+    var $lightboxHtmlElement
     var linkEl
     var size
     var item
 
     for (var i = 0; i < numNodes; i++) {
       figureEl = thumbElements[i] // <figure> element
+      $figureEl = $(figureEl)
 
       // We only allow <figure> html elements
-      if ($(figureEl).prop('nodeName') !== 'FIGURE') {
+      if ($figureEl.prop('nodeName') !== 'FIGURE') {
         continue
       }
 
@@ -29,6 +32,17 @@ var initPhotoSwipeFromDOM = function (gallerySelector) {
       size = linkEl.getAttribute('data-size').split('x')
 
       // create slide object
+      $lightboxHtmlElement = $figureEl.find('[data-lightbox=html]');
+      if ($lightboxHtmlElement.length === 1) {
+        item = {
+          'html': $lightboxHtmlElement.html(),
+          'el': figureEl
+        }
+        items.push(item)
+
+        continue
+      }
+
       item = {
         src: linkEl.getAttribute('href'),
         w: parseInt(size[0], 10),

diff --git a/src/Frontend/Modules/MediaLibrary/Layout/Widgets/Lightbox.html.twig b/src/Frontend/Modules/MediaLibrary/Layout/Widgets/Lightbox.html.twig
@@ -32,11 +32,15 @@
     <div class="widget-body">
       {% for mediaItem in mediaItems %}
         <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-          {% set img = mediaItem.webpath() %}
-          <a href="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_large') }}" itemprop="contentUrl" data-size="{{ mediaItem.width }}x{{ mediaItem.height }}">
-            <img itemprop="thumbnail" src="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_small') }}" alt="{{ mediaItem.title }}" />
+          <a href="{{ (mediaItem.getWebPath('media_library_lightbox_large')) }}" itemprop="contentUrl" data-size="{{ mediaItem.width }}x{{ mediaItem.height }}">
+            <img itemprop="thumbnail" src="{{ (mediaItem.getThumbnail('media_library_lightbox_small')) }}" alt="{{ mediaItem.title }}" />
           </a>
           <figcaption itemprop="caption description">{% if title %}{{ title }}{% endif %}{% if not title %}{{ mediaItem.title }}{% endif %}</figcaption>
+          {% if mediaItem.type == 'movie' %}
+            <div class="hidden" data-lightbox="html">
+              {{ mediaItem.getIncludeHTML()|raw }}
+            </div>
+          {% endif %}
         </figure>
       {% endfor %}
     </div>

diff --git a/src/Frontend/Modules/MediaLibrary/Layout/Widgets/OneImage.html.twig b/src/Frontend/Modules/MediaLibrary/Layout/Widgets/OneImage.html.twig
@@ -18,7 +18,11 @@
     {% block widget_body %}
       <div class="widget-body">
         <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-          <img itemprop="thumbnail" class="img-polaroid img-responsive" src="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_one_image_large') }}" alt="{{ mediaItem.title }}" />
+          {% if mediaItem.type == 'movie' %}
+            {{ mediaItem.getIncludeHTML()|raw }}
+          {% else %}
+            <img itemprop="thumbnail" class="img-polaroid img-responsive" src="{{ (mediaItem.getWebPath('media_library_one_image_large')) }}" alt="{{ mediaItem.title }}" />
+          {% endif %}
         </figure>
       </div>
     {% endblock %}

diff --git a/src/Frontend/Modules/MediaLibrary/Layout/Widgets/OneRandomImage.html.twig b/src/Frontend/Modules/MediaLibrary/Layout/Widgets/OneRandomImage.html.twig
@@ -18,7 +18,11 @@
     {% block widget_body %}
       <div class="widget-body">
         <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-          <img itemprop="thumbnail" class="img-polaroid img-responsive" src="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_one_image_large') }}" itemprop="thumbnail" alt="{{ mediaItem.title }}" />
+          {% if mediaItem.type == 'movie' %}
+            {{ mediaItem.getIncludeHTML()|raw }}
+          {% else %}
+            <img itemprop="thumbnail" class="img-polaroid img-responsive" src="{{ (mediaItem.getWebPath('media_library_one_image_large')) }}" itemprop="thumbnail" alt="{{ mediaItem.title }}" />
+          {% endif %}
         </figure>
       </div>
     {% endblock %}

diff --git a/src/Frontend/Modules/MediaLibrary/Layout/Widgets/Slider.html.twig b/src/Frontend/Modules/MediaLibrary/Layout/Widgets/Slider.html.twig
@@ -19,7 +19,11 @@
     <div class="widget-body">
       {% for mediaItem in mediaItems %}
       <div itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-        <img itemprop="thumbnail" class="img-responsive" src="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_slider_pano') }}" alt="{{ mediaItem.title }}" />
+        {% if mediaItem.type == 'movie' %}
+          {{ mediaItem.getIncludeHTML()|raw }}
+        {% else %}
+          <img itemprop="thumbnail" class="img-responsive" src="{{ (mediaItem.getWebPath('media_library_slider_pano')) }}" alt="{{ mediaItem.title }}" />
+        {% endif %}
       </div>
       {% endfor %}
     </div>