Add youtube and poster support to files

Respect them in video element.

Classes/EventListener/AddFurtherMetadataToFile.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace DanielSiepmann\DsSite\EventListener;
+
+/*
+ * Copyright (C) 2020 Daniel Siepmann <coding@daniel-siepmann.de>
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * 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.
+ */
+
+use TYPO3\CMS\Core\Resource\Event\EnrichFileMetaDataEvent;
+use TYPO3\CMS\Core\Resource\FileReference;
+use TYPO3\CMS\Frontend\Resource\FileCollector;
+
+class AddFurtherMetadataToFile
+{
+    /**
+     * @var FileCollector
+     */
+    private $fileCollector;
+
+    public function __construct(FileCollector $fileCollector)
+    {
+        $this->fileCollector = $fileCollector;
+    }
+
+    public function __invoke(EnrichFileMetaDataEvent $event): void
+    {
+        $record = $event->getRecord();
+
+        $record['poster'] = $this->resolvePoster($record);
+
+        $event->setRecord($record);
+    }
+
+    private function resolvePoster(array $record): ?FileReference
+    {
+        $this->fileCollector->addFilesFromRelation(
+            'sys_file_metadata',
+            'poster',
+            $record
+        );
+
+        $files = $this->fileCollector->getFiles();
+        return $files[0] ?? null;
+    }
+}

Configuration/Services.yaml

@@ -28,3 +28,12 @@ services:
         iconIdentifier: 'content-widget-rss'
         height: 'medium'
         width: 'small'
+
+  # Events
+  DanielSiepmann\DsSite\EventListener\AddFurtherMetadataToFile:
+    public: true
+    tags:
+      - name: event.listener
+        identifier: 'AddFurtherMetadataToFile'
+        event: TYPO3\CMS\Core\Resource\Event\EnrichFileMetaDataEvent
+        after: 'languageAndWorkspaceOverlay'

Configuration/TCA/Overrides/sys_file_metadata.php

@@ -0,0 +1,35 @@
+
+<?php
+
+(function (string $extensionKey, string $tableName) {
+    $languagePath = 'LLL:EXT:' . $extensionKey . '/Resources/Private/Language/locallang_tca.xlf:' . $tableName . '.';
+
+    \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA'][$tableName], [
+        'columns' => [
+            'youtube' => [
+                'label' => $languagePath . 'youtube',
+                'config' => [
+                    'type' => 'input',
+                    'eval' => 'trim',
+                ],
+            ],
+            'poster' => [
+                'label' => $languagePath . 'poster',
+                'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
+                    'poster',
+                    [
+                        'maxitems' => 1,
+                    ],
+                    $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
+                ),
+            ],
+        ],
+    ]);
+
+    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
+        $tableName,
+        'youtube, poster',
+        '',
+        'after:title'
+    );
+})('ds_site', 'sys_file_metadata');

Configuration/TCA/Overrides/tt_content.php

@@ -1,7 +1,7 @@
 <?php
 
-(function (string $extensionKey, string $table, string $ctype) {
+(function (string $extensionKey, string $tableName, string $ctype) {
-    \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA'][$table], [
+    \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA'][$tableName], [
         'types' => [
             $ctype => [
                 'showitem' => implode(',', [

Configuration/TCA/Overrides/tt_content_image.php

@@ -1,7 +1,7 @@
 <?php
 
-(function (string $extensionKey, string $table, string $ctype) {
+(function (string $extensionKey, string $tableName, string $ctype) {
-    \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA'][$table], [
+    \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA'][$tableName], [
         'types' => [
             $ctype => [
                 'showitem' => implode(',', [

Resources/Private/Language/locallang_tca.xlf

@@ -12,6 +12,13 @@
             <trans-unit id="tt_content.video">
                 <source>Video</source>
             </trans-unit>
+
+            <trans-unit id="sys_file_metadata.youtube">
+                <source>YouTube key of Video</source>
+            </trans-unit>
+            <trans-unit id="sys_file_metadata.poster">
+                <source>Poster Image before Video is loaded</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/Private/Partials/Video.html

@@ -1,15 +1,18 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
     data-namespace-typo3-fluid="true">
     <figure>
-        <video controls>
+        <video controls {f:if(condition: video.properties.poster.publicUrl, then: 'poster="{video.properties.poster.publicUrl}"')}>
-            <source src="{video.publicUrl}" type="video/mp4">
+            <source src="https://daniel-siepmann.de/fileadmin/Videos/PHPUnit/UnitTesting-Introduction.mp4" type="video/mp4">
             <p>
                 Sorry, your browser doesn't support embedded videos.<br>
-                You can find the raw video file here: <a href="{video.publicUrl}">{video.publicUrl}</a>
+                You can find the raw video file here: <a href="{video.publicUrl}">{video.publicUrl}</a>.
             </p>
         </video>
         <figcaption>
             <p>Video v{video.originalFile.uid}: {video.title}</p>
+            <f:if condition="{video.properties.youtube}">
+                <p>The Video is available on YouTube: <f:link.typolink parameter="https://www.youtube.com/watch?v=EZkwnqb-4vk" target="_blank">https://www.youtube.com/watch?v={video.properties.youtube}</f:link.typolink>.</p>
+            </f:if>
             <p>{video.description -> f:format.nl2br()}</p>
         </figcaption>
     </figure>

Resources/Private/Templates/Backend/ContentElements/Video.html

@@ -11,9 +11,28 @@
                     <source src="/{video.publicUrl}" type="video/mp4">
                 </video>
                 <figcaption>
+                    <p>Video v{video.originalFile.uid}: {video.title}</p>
                     <p>
-                        Video v{video.originalFile.uid}: {video.title}<br>
+                        <f:if condition="{video.properties.youtube}">
-                        {video.description -> f:format.nl2br()}
+                            <f:then>
+                                The Video is available on YouTube: <f:link.typolink parameter="https://www.youtube.com/watch?v=EZkwnqb-4vk" target="_blank">https://www.youtube.com/watch?v={video.properties.youtube}</f:link.typolink>.
+                            </f:then>
+                            <f:else>
+                                The Video is not available on YouTube
+                            </f:else>
+                        </f:if>
+                    </p>
+                    <p>{video.description -> f:format.nl2br()}</p>
+
+                    <p>
+                        <f:if condition="{video.properties.poster}">
+                            <f:then>
+                                <f:image image="{video.properties.poster}" height="210" width="375" />
+                            </f:then>
+                            <f:else>
+                                No poster configured.
+                            </f:else>
+                        </f:if>
                     </p>
                 </figcaption>
             </figure>

ext_tables.sql

@@ -1,3 +1,8 @@
 CREATE TABLE sys_category (
     slug varchar(2048),
 );
+
+CREATE TABLE sys_file_metadata (
+    youtube varchar(255) DEFAULT '' NOT NULL,
+    poster int(11) unsigned DEFAULT '0' NOT NULL,
+);