[FEATURE] Add new Audio/Video UI and Toolbox Plugin (kitodo#1758)

Co-authored-by: Sebastian Meyer <sebastian.meyer@opencultureconsulting.com>

Author: fschoelzel

Build/package-lock.json

@@ -24,6 +24,7 @@
     "@babel/eslint-parser": "^7.24.7",
     "@babel/plugin-transform-runtime": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
+    "@babel/runtime": "^7.28.4",
     "@types/audioworklet": "^0.0.60",
     "@types/jest": "^27.5.2",
     "@types/jquery": "^3.5.30",

Build/package.json

@@ -31,6 +31,7 @@ module.exports = (env, argv) => {
     output: {
       filename: 'JavaScript/DlfMediaPlayer/[name].js',
       path: PUBLIC_PATH,
+      assetModuleFilename: 'Assets/[name].[hash][ext]',
     },
     plugins: [
       new RemoveEmptyScriptsPlugin(),
@@ -81,6 +82,10 @@ module.exports = (env, argv) => {
             },
           ],
         },
+        {
+          test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          type: 'asset/resource',
+        },
       ],
     },
     externals: {
@@ -114,6 +119,7 @@ module.exports = (env, argv) => {
       alias: {
         // __dirname will stands for your root directory level
         // path.resolve will concatenate your project folder location with
+        Assets: path.resolve(PRIVATE_PATH, `Assets/`),
         lib: path.resolve(PRIVATE_PATH, `JavaScript/lib/`),
         DlfMediaPlayer: path.resolve(PRIVATE_PATH, `JavaScript/DlfMediaPlayer/`),
         SlubMediaPlayer: path.resolve(PRIVATE_PATH, `JavaScript/SlubMediaPlayer/`)

Build/webpack.config.js

@@ -14,6 +14,7 @@
 
 use Psr\Http\Message\ResponseInterface;
 use Kitodo\Dlf\Common\AbstractDocument;
+use Kitodo\Dlf\Common\Helper;
 use TYPO3\CMS\Core\Page\AssetCollector;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Core\Utility\MathUtility;
@@ -70,6 +71,8 @@ public function mainAction(): ResponseInterface
      */
     protected function getVideoInfo(AbstractDocument $doc, int $pageNo): ?array
     {
+        // Get image file use groups
+        $imageUseGroups = $this->useGroupsConfiguration->getImage();
         // Get video file use groups
         $videoUseGroups = $this->useGroupsConfiguration->getVideo();
         $mainVideoUseGroup = $videoUseGroups[0] ?? '';
@@ -91,7 +94,7 @@ protected function getVideoInfo(AbstractDocument $doc, int $pageNo): ?array
         $videoChapters = $this->collectVideoChapters($doc);
 
         // Get additional video URLs
-        $videoUrl = $this->collectAdditionalVideoUrls($doc, $pageNo, $thumbnailUseGroups, $waveformUseGroups);
+        $videoUrl = $this->collectAdditionalVideoUrls($doc, $pageNo, $thumbnailUseGroups, $waveformUseGroups, $imageUseGroups);
 
         return [
             'start' => $videoChapters[$pageNo - 1]['timecode'] ?? '',
@@ -172,19 +175,33 @@ private function collectVideoChapters(AbstractDocument $doc): array
      * @param int $pageNo The page number
      * @param array $thumbnailUseGroups An array of thumb file use groups
      * @param array $waveformUseGroups An array of waveform file use groups
+     * @param array $imageUseGroups An array of image file use groups
      * @return array An array containing additional video URLs like poster and waveform
      */
-    private function collectAdditionalVideoUrls(AbstractDocument $doc, int $pageNo, array $thumbnailUseGroups, array $waveformUseGroups): array
+    private function collectAdditionalVideoUrls(AbstractDocument $doc, int $pageNo, array $thumbnailUseGroups, array $waveformUseGroups, array $imageUseGroups): array
     {
         $videoUrl = [];
+
+        $showPoster = $this->settings['constants']['showPoster'] ?? null;
         $thumbFiles = $this->findFiles($doc, 0, $thumbnailUseGroups); // 0 = for whole video (not just chapter)
-        if (!empty($thumbFiles) && $this->settings['constants']['showPoster'] == 1) {
+        if (!empty($thumbFiles) && (int) $showPoster === 1) {
             $videoUrl['poster'] = $thumbFiles[0];
         }
+
         $waveformFiles = $this->findFiles($doc, $pageNo, $waveformUseGroups);
         if (!empty($waveformFiles)) {
             $videoUrl['waveform'] = $waveformFiles[0];
         }
+
+        $showAudioLabelImage = $this->settings['constants']['showAudioLabelImage'] ?? null;
+        $audioLabelImageFiles = $this->findFiles($doc, $pageNo, $imageUseGroups);
+        if (!empty($audioLabelImageFiles)
+            && (int) $showAudioLabelImage === 1
+            && Helper::filterFilesByMimeType($audioLabelImageFiles[0], ['image'], ['JPG'], 'mimeType')
+        ) {
+            $videoUrl['audioLabelImage'] = $audioLabelImageFiles[0];
+        }
+
         return $videoUrl;
     }
 

Classes/Controller/MediaPlayerController.php

@@ -80,6 +80,7 @@ private function renderTools(): void
                 match ($tool) {
                     'tx_dlf_multiviewaddsourcetool', 'multiviewaddsourcetool' => $this->renderToolByName('renderMultiViewAddSourceTool'),
                     'tx_dlf_annotationtool', 'annotationtool' => $this->renderToolByName('renderAnnotationTool'),
+                    'tx_dlf_audiovideotool', 'audiovideotool' => $this->renderToolByName('renderAudioVideoTool'),
                     'tx_dlf_fulltextdownloadtool', 'fulltextdownloadtool' => $this->renderToolByName('renderFulltextDownloadTool'),
                     'tx_dlf_fulltexttool', 'fulltexttool' => $this->renderToolByName('renderFulltextTool'),
                     'tx_dlf_imagedownloadtool', 'imagedownloadtool' => $this->renderToolByName('renderImageDownloadTool'),
@@ -231,6 +232,34 @@ private function renderAnnotationTool(): void
         }
     }
 
+    /**
+     * Renders the audio video tool (used in template)
+     * @SuppressWarnings(PHPMD.UnusedPrivateMethod)
+     *
+     * @access private
+     *
+     * @return void
+     */
+    private function renderAudioVideoTool(): void
+    {
+        if (
+            $this->isDocMissingOrEmpty()
+            || empty($this->useGroupsConfiguration->getImage())
+        ) {
+            // Quit without doing anything if required variables are not set.
+            return;
+        }
+
+        $this->setPage();
+        $page = $this->requestData['page'] ?? 0;
+        $audioLabelImage = $this->getImage($page);
+
+        if (!empty($audioLabelImage) && Helper::filterFilesByMimeType($audioLabelImage, ['image'], ['JPG'])) {
+            // assign flag to view if Audio Label Image is available
+            $this->view->assign('hasAudioLabelImage', true);
+        }
+    }
+
     /**
      * Renders the fulltext download tool (used in template)
      * @SuppressWarnings(PHPMD.UnusedPrivateMethod)

Classes/Controller/ToolboxController.php

@@ -133,6 +133,9 @@ For information on equalizer configuration, see :ref:`the equalizer subpage <eq_
          // Whether or not showing the Poster Image, if given, until playback is first started
          showPoster = 1
 
+         // Whether or not showing the Audio Label-Image in Audio mode inside the media-panel
+         showAudioLabelImage = 1
+
          // Template of filename used when downloading screenshot (without file extension)
          // Placeholders may be used
          screenshotFilenameTemplate = sachsen-digital-de_{title}_h{hh}m{mm}s{ss}f{ff}

Documentation/Features/MediaPlayer/Configuration.rst

@@ -1001,6 +1001,7 @@ Toolbox
    :Values:
        * tx_dlf_multiviewaddsourcetool
        * tx_dlf_annotationtool
+       * tx_dlf_audiovideotool
        * tx_dlf_fulltexttool
        * tx_dlf_imagedownloadtool
        * tx_dlf_imagemanipulationtool
@@ -1059,6 +1060,13 @@ The fulltext is fetched and rendered by JavaScript into the `<div id="tx-dlf-ful
 
 **Please note**: To allow JavaScript fetching the fulltext, the `CORS headers <https://en.wikipedia.org/wiki/Cross-origin_resource_sharing>`_ must be configured appropriate on the providing webserver.
 
+Audio Video tool
+^^^^^^^^^^^^^
+
+This tool loads the Buttons for the Audiolabel-Image, Equalizer and Marker Table 
+
+:typoscript:`plugin.tx_dlf_audiovideotool.`
+
 Model download tool
 ^^^^^^^^^^^^^