[FEATURE] add an additional wrap to all placeholder content to overla…

…y a video button to the preview image
ghermens · Mar 19, 2020 · cf4ed8e · cf4ed8e
1 parent 16bbff2
commit cf4ed8e
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 6 deletions.
diff --git a/Classes/Resource/Rendering/VimeoRenderer.php b/Classes/Resource/Rendering/VimeoRenderer.php
@@ -157,6 +157,11 @@ protected function renderPlaceholder(FileInterface $file, $width, $height, array
             $placeholderContent = $title . $placeholderContent;
         }
 
+        if (!empty($placeholderContentObject['allWrap'])) {
+            $wrapArr = explode('|', $placeholderContentObject['allWrap']);
+            $placeholderContent = trim($wrapArr[0] ?? '') . $placeholderContent . trim($wrapArr[1] ?? '');
+        }
+
         $placeholderContent = '<div class="media2click-placeholder' . ($hasPreview ? ' media2click-haspreview':'') . '" style="' . $style . '">' . $placeholderContent . '</div>';
 
         return $placeholderContent;

diff --git a/Classes/Resource/Rendering/YouTubeRenderer.php b/Classes/Resource/Rendering/YouTubeRenderer.php
@@ -161,6 +161,11 @@ protected function renderPlaceholder(FileInterface $file, $width, $height, array
             $placeholderContent = $title . $placeholderContent;
         }
 
+        if (!empty($placeholderContentObject['allWrap'])) {
+            $wrapArr = explode('|', $placeholderContentObject['allWrap']);
+            $placeholderContent = trim($wrapArr[0] ?? '') . $placeholderContent . trim($wrapArr[1] ?? '');
+        }
+
         $placeholderContent = '<div class="media2click-placeholder' . ($hasPreview ? ' media2click-haspreview':'') . '" style="' . $style . '">' . $placeholderContent . '</div>';
 
         return $placeholderContent;

diff --git a/Configuration/TypoScript/constants.typoscript b/Configuration/TypoScript/constants.typoscript
@@ -3,17 +3,20 @@ plugin {
     #cat=content/enable/a; type=boolean; label=Enable 2-click for external media
     enable = 0
 
-    #cat=content/enable/b; type=boolean; label=Show the video's title as the placeholder's title
+    #cat=content/enable/b; type=wrap; label=Additional warp to all placeholder content
+    allWrap = <div class="media2click-placeholder-inner">|</div>
+
+    #cat=content/enable/c; type=boolean; label=Show the video's title as the placeholder's title
     showTitle = 1
 
-    #cat=content/enable/c; type=boolean; label=Show the video's preview image
+    #cat=content/enable/d; type=boolean; label=Show the video's preview image
     showPreviewImage = 1
 
     showPreviewImage {
-      #cat=content/enable/d; type=int+; label=Show the video's preview image
+      #cat=content/enable/e; type=int+; label=Show the video's preview image
       maxWidth = 0
 
-      #cat=content/enable/e; type=int+; label=Show the video's preview image
+      #cat=content/enable/f; type=int+; label=Show the video's preview image
       maxHeight = 0
     }
   }

diff --git a/Configuration/TypoScript/setup.typoscript b/Configuration/TypoScript/setup.typoscript
@@ -15,6 +15,8 @@ lib {
       media {
         additionalConfig {
           placeholderContent {
+            allWrap = {$plugin.media2click.allWrap}
+
             wrap = <span class="media2click-content">|</span>
             value = Click to load external video!
             lang {

diff --git a/Documentation/Configuration/Index.rst b/Documentation/Configuration/Index.rst
@@ -33,6 +33,22 @@ enable
 :aspect:`Default:`
    0
 
+.. _constants-allwrap:
+
+allWrap
+"""""""
+
+:aspect:`Property`
+   allWrap
+
+:aspect:`Data type:`
+   wrap
+
+:aspect:`Description`
+   Additional wrap to all placeholder content
+
+:aspect:`Default:`
+   <div class="media2click-placeholder-inner">|</div>
 
 .. _constants-showtitle:
 
@@ -125,6 +141,9 @@ placeholderContent
 
    Properties:
 
+   :ts:`.allWrap:`
+      This wraps the whole placeholder content.
+
    :ts:`.value:` String
       Default text
 

diff --git a/Resources/Public/Css/media2click.css b/Resources/Public/Css/media2click.css
@@ -24,10 +24,26 @@
     margin-bottom: .5em;
 }
 
+.media2click-placeholder-inner {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.media2click-placeholder.media2click-haspreview .media2click-placeholder-inner {
+    background-image: url(../Images/videobutton.png);
+    background-size: 30% auto;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
 .media2click-content {
     display: block;
 }
 
 .media2click-wrap iframe {
     display: none;
-}
+}
diff --git a/Resources/Public/Images/videobutton.png b/Resources/Public/Images/videobutton.png
diff --git a/ext_emconf.php b/ext_emconf.php
@@ -22,5 +22,5 @@
         ],
     ],
     'state' => 'beta',
-    'version' => '0.2.3',
+    'version' => '0.2.4',
 ];