fix(video-clips): create unique temporary files for resources to be deleted after generation

- tempfile uniqueness ensures that each process lives in its independent context - add writable/temp folder to store video clips temporary resources - add videoClipWorkers config to Admin for specifying the number of ffmpeg processes to run in parallel - update video clip preview background to better suit the end result
2022-01-21 12:35:50 +00:00 · 2022-01-21 12:35:50 +00:00 · 7f7c878cb6
parent 482b47ba6b
commit 7f7c878cb6
13 changed files with 128 additions and 48 deletions
--- a/.gitignore
+++ b/.gitignore
@ -60,6 +60,9 @@ writable/logs/*
 writable/session/*
 !writable/session/index.html

+writable/temp/*
+!writable/temp/index.html
+
 writable/uploads/*
 !writable/uploads/index.html

--- a/app/Libraries/MediaClipper/Config/MediaClipper.php
+++ b/app/Libraries/MediaClipper/Config/MediaClipper.php
@ -229,8 +229,10 @@ class MediaClipper extends BaseConfig
     */
    public array $themes = [
        'pine' => [
-            // Preview must be a HSL colorscheme string
+            // Previews must be a HSL colorscheme string
            'preview' => '174 100% 29%',
+            'preview-background' => '172 100% 17%',
+            // arrays are rgb
            'background' => [0, 86, 74],
            'text' => [255, 255, 255],
            // subtitle hex color is BGR (Blue, Green, Red),
@ -248,6 +250,8 @@ class MediaClipper extends BaseConfig
        'crimson' => [
            // Preview must be a HSL colorscheme string
            'preview' => '350 87% 61%',
+            'preview-background' => '348 75% 40%',
+            // arrays are rgb
            'background' => [179, 31, 57],
            'text' => [255, 255, 255],
            // subtitle hex color is BGR (Blue, Green, Red),
@ -265,6 +269,8 @@ class MediaClipper extends BaseConfig
        'lake' => [
            // Preview must be a HSL colorscheme string
            'preview' => '194 100% 44%',
+            'preview-background' => '194 100% 22%',
+            // arrays are rgb
            'background' => [0, 86, 113],
            'text' => [255, 255, 255],
            // subtitle hex color is BGR (Blue, Green, Red),
@ -282,6 +288,8 @@ class MediaClipper extends BaseConfig
        'amber' => [
            // Preview must be a HSL colorscheme string
            'preview' => '17 100% 57%',
+            'preview-background' => '17 100% 35%',
+            // arrays are rgb
            'background' => [177, 50, 0],
            'text' => [255, 255, 255],
            // subtitle hex color is BGR (Blue, Green, Red),
@ -299,6 +307,8 @@ class MediaClipper extends BaseConfig
        'jacaranda' => [
            // Preview must be a HSL colorscheme string
            'preview' => '254 72% 52%',
+            'preview-background' => '254 73% 30%',
+            // arrays are rgb
            'background' => [47, 21, 132],
            'text' => [255, 255, 255],
            // subtitle hex color is BGR (Blue, Green, Red),
@ -316,6 +326,8 @@ class MediaClipper extends BaseConfig
        'onyx' => [
            // Preview must be a HSL colorscheme string
            'preview' => '240 17% 2%',
+            'preview-background' => '240 17% 2%',
+            // arrays are rgb
            'background' => [5, 5, 7],
            'text' => [255, 255, 255],
            // subtitle hex color is BGR (Blue, Green, Red),
--- a/app/Libraries/MediaClipper/VideoClipper.php
+++ b/app/Libraries/MediaClipper/VideoClipper.php
@ -55,6 +55,8 @@ class VideoClipper

    protected ?string $episodeNumbering = null;

+    protected string $tempFileOutput;
+
    /**
     * @var array<string, mixed>
     */
@ -90,11 +92,22 @@ class VideoClipper

        $podcastFolder = media_path("podcasts/{$this->episode->podcast->handle}");

-        $this->soundbiteOutput = $podcastFolder . "/{$this->episode->slug}-soundbite-{$this->start}-to-{$this->end}.mp3";
-        $this->subtitlesClipOutput = $podcastFolder . "/{$this->episode->slug}-subtitles-clip-{$this->start}-to-{$this->end}.srt";
-        $this->videoClipBgOutput = $podcastFolder . "/{$this->episode->slug}-clip-bg-{$this->format}-{$this->theme}.png";
        $this->videoClipOutput = $podcastFolder . "/{$this->episode->slug}-clip-{$this->start}-to-{$this->end}-{$this->format}-{$this->theme}.mp4";
        $this->videoClipFilePath = "podcasts/{$this->episode->podcast->handle}/{$this->episode->slug}-clip-{$this->start}-to-{$this->end}-{$this->format}-{$this->theme}.mp4";
+
+        // Temporary files to generate clip
+        $tempFile = tempnam(WRITEPATH . 'temp', "{$this->episode->slug}-soundbite-{$this->start}-to-{$this->end}");
+
+        if (! $tempFile) {
+            throw new Exception(
+                'Could not create temporary files, check for permissions on your ' . WRITEPATH . 'temp folder.'
+            );
+        }
+
+        $this->tempFileOutput = $tempFile;
+        $this->soundbiteOutput = $tempFile . '.mp3';
+        $this->subtitlesClipOutput = $tempFile . '.srt';
+        $this->videoClipBgOutput = $tempFile . '.png';
    }

    public function soundbite(): void
@ -178,6 +191,7 @@ class VideoClipper
    public function cleanTempFiles(): void
    {
        // delete generated video background image, soundbite & subtitlesClip
+        unlink($this->tempFileOutput);
        unlink($this->soundbiteOutput);
        unlink($this->subtitlesClipOutput);
        unlink($this->videoClipBgOutput);
--- a/app/Models/ClipModel.php
+++ b/app/Models/ClipModel.php
@ -130,6 +130,20 @@ class ClipModel extends Model
        return $found;
    }

+    public function getRunningVideoClipsCount(): int
+    {
+        $result = $this
+            ->select('COUNT(*) as `running_count`')
+            ->where([
+                'type' => 'video',
+                'status' => 'running',
+            ])
+            ->get()
+            ->getResultArray();
+
+        return (int) $result[0]['running_count'];
+    }
+
    public function deleteVideoClip(int $podcastId, int $episodeId, int $clipId): BaseResult | bool
    {
        $this->clearVideoClipCache($clipId);
--- a/app/Resources/js/modules/VideoClipBuilder.ts
+++ b/app/Resources/js/modules/VideoClipBuilder.ts
@ -36,15 +36,16 @@ const VideoClipBuilder = (): void => {

      let theme = form
        .querySelector('input[name="theme"]:checked')
-        ?.parentElement?.style.getPropertyValue("--color-accent-base");
+        ?.parentElement?.style.getPropertyValue("--color-background-preview");
      videoClipPreviewer.setAttribute("theme", theme || "");

      const watchThemeChange = (event: Event) => {
        theme =
          (
            event.target as HTMLInputElement
-          ).parentElement?.style.getPropertyValue("--color-accent-base") ??
-          theme;
+          ).parentElement?.style.getPropertyValue(
+            "--color-background-preview"
+          ) ?? theme;
        videoClipPreviewer.setAttribute("theme", theme || "");
      };
      for (let i = 0; i < themeOptions.length; i++) {
--- a/app/Resources/js/modules/video-clip-previewer.ts
+++ b/app/Resources/js/modules/video-clip-previewer.ts
@ -31,7 +31,7 @@ export class VideoClipPreviewer extends LitElement {
  format: VideoFormats = VideoFormats.Portrait;

  @property()
-  theme = "173 44% 96%";
+  theme = "172 100% 17%";

  @property({ type: Number })
  duration!: number;
--- a/modules/Admin/Config/Admin.php
+++ b/modules/Admin/Config/Admin.php
@ -15,4 +15,10 @@ class Admin extends BaseConfig
     * Defines a base route for all admin pages
     */
    public string $gateway = 'cp-admin';
+
+    /**
+     * Number of maximum ffmpeg processes to spawn in parallel when generating video clips. Processes are instance wide,
+     * meaning that they are shared across all podcasts and episodes.
+     */
+    public int $videoClipWorkers = 2;
 }
--- a/modules/Admin/Controllers/SchedulerController.php
+++ b/modules/Admin/Controllers/SchedulerController.php
@ -13,12 +13,20 @@ namespace Modules\Admin\Controllers;
 use App\Models\ClipModel;
 use CodeIgniter\Controller;
 use CodeIgniter\I18n\Time;
+use Exception;
 use MediaClipper\VideoClipper;

 class SchedulerController extends Controller
 {
    public function generateVideoClips(): bool
    {
+        // get number of running clips to prevent from having too much running in parallel
+        // TODO: get the number of running ffmpeg processes directly from the machine?
+        $runningVideoClips = (new ClipModel())->getRunningVideoClipsCount();
+        if ($runningVideoClips >= config('Admin')->videoClipWorkers) {
+            return true;
+        }
+
        // get all clips that haven't been processed yet
        $scheduledClips = (new ClipModel())->getScheduledVideoClips();

@ -38,40 +46,49 @@ class SchedulerController extends Controller

        // Loop through clips to generate them
        foreach ($scheduledClips as $scheduledClip) {
-            // set clip to pending
-            (new ClipModel())
-                ->update($scheduledClip->id, [
-                    'status' => 'running',
-                    'job_started_at' => Time::now(),
-                ]);
-            $clipper = new VideoClipper(
-                $scheduledClip->episode,
-                $scheduledClip->start_time,
-                $scheduledClip->end_time,
-                $scheduledClip->format,
-                $scheduledClip->theme['name'],
-            );
-            $exitCode = $clipper->generate();
+            try {

-            $clipModel = new ClipModel();
-            if ($exitCode === 0) {
-                // success, video was generated
-                $scheduledClip->setMedia($clipper->videoClipFilePath);
-                $clipModel->update($scheduledClip->id, [
-                    'media_id' => $scheduledClip->media_id,
-                    'status' => 'passed',
-                    'logs' => $clipper->logs,
-                    'job_ended_at' => Time::now(),
-                ]);
-            } else {
-                // error
-                $clipModel->update($scheduledClip->id, [
+                // set clip to pending
+                (new ClipModel())
+                    ->update($scheduledClip->id, [
+                        'status' => 'running',
+                        'job_started_at' => Time::now(),
+                    ]);
+                $clipper = new VideoClipper(
+                    $scheduledClip->episode,
+                    $scheduledClip->start_time,
+                    $scheduledClip->end_time,
+                    $scheduledClip->format,
+                    $scheduledClip->theme['name'],
+                );
+                $exitCode = $clipper->generate();
+
+                $clipModel = new ClipModel();
+                if ($exitCode === 0) {
+                    // success, video was generated
+                    $scheduledClip->setMedia($clipper->videoClipFilePath);
+                    $clipModel->update($scheduledClip->id, [
+                        'media_id' => $scheduledClip->media_id,
+                        'status' => 'passed',
+                        'logs' => $clipper->logs,
+                        'job_ended_at' => Time::now(),
+                    ]);
+                } else {
+                    // error
+                    $clipModel->update($scheduledClip->id, [
+                        'status' => 'failed',
+                        'logs' => $clipper->logs,
+                        'job_ended_at' => Time::now(),
+                    ]);
+                }
+                $clipModel->clearVideoClipCache($scheduledClip->id);
+            } catch (Exception $exception) {
+                (new ClipModel())->update($scheduledClip->id, [
                    'status' => 'failed',
-                    'logs' => $clipper->logs,
+                    'logs' => $exception,
                    'job_ended_at' => Time::now(),
                ]);
            }
-            $clipModel->clearVideoClipCache($scheduledClip->id);
        }

        return true;
--- a/modules/Admin/Language/en/VideoClip.php
+++ b/modules/Admin/Language/en/VideoClip.php
@ -38,17 +38,19 @@ return [
        'createSuccess' => 'Video clip has been successfully created!',
        'deleteSuccess' => 'Video clip has been successfully removed!',
    ],
+    'format' => [
+        'landscape' => 'Landscape',
+        'portrait' => 'Portrait',
+        'squared' => 'Squared',
+    ],
    'form' => [
        'title' => 'New video clip',
        'params_section_title' => 'Video clip parameters',
        'clip_title' => 'Clip title',
        'format' => [
            'label' => 'Choose a format',
-            'landscape' => 'Landscape',
            'landscape_hint' => 'With a 16:9 ratio, landscape videos are great for PeerTube, Youtube and Vimeo.',
-            'portrait' => 'Portrait',
            'portrait_hint' => 'With a 9:16 ratio, portrait videos are great for TikTok, Youtube shorts and Instagram stories.',
-            'squared' => 'Squared',
            'squared_hint' => 'With a 1:1 ratio, squared videos are great for Mastodon, Facebook, Twitter and LinkedIn.',
        ],
        'theme' => 'Select a theme',
--- a/modules/Admin/Language/fr/VideoClip.php
+++ b/modules/Admin/Language/fr/VideoClip.php
@ -38,17 +38,19 @@ return [
        'createSuccess' => 'L’extrait vidéo a été créé avec succès !',
        'deleteSuccess' => 'L’extrait vidéo a bien été supprimé !',
    ],
+    'format' => [
+        'landscape' => 'Paysage',
+        'portrait' => 'Portrait',
+        'squared' => 'Carré',
+    ],
    'form' => [
        'title' => 'Nouvel extrait vidéo',
        'params_section_title' => 'Paramètres de l’extrait vidéo',
        'clip_title' => 'Titre de l’extrait',
        'format' => [
            'label' => 'Choisissez un format',
-            'landscape' => 'Paysage',
            'landscape_hint' => 'Avec un ratio de 16/9, les vidéos en paysage sont adaptées pour PeerTube, Youtube et Vimeo.',
-            'portrait' => 'Portrait',
            'portrait_hint' => 'Avec un ratio de 9/16, les vidéos en portrait sont adaptées pour TikTok, les Youtube shorts and les stories Instagram.',
-            'squared' => 'Carré',
            'squared_hint' => 'Avec un ratio de 1/1,  les vidéos carrées sont adaptées pour Mastodon, Facebook, Twitter et LinkedIn.',
        ],
        'theme' => 'Sélectionnez un thème',
--- a/themes/cp_admin/episode/video_clips_list.php
+++ b/themes/cp_admin/episode/video_clips_list.php
@ -62,7 +62,7 @@ use CodeIgniter\I18n\Time;
                    'portrait' => 'aspect-[9/16]',
                    'squared' => 'aspect-square',
                ];
-                return '<a href="' . route_to('video-clip', $videoClip->podcast_id, $videoClip->episode_id, $videoClip->id) . '" class="inline-flex items-center w-full group gap-x-2 focus:ring-accent"><div class="relative"><span class="absolute block w-3 h-3 rounded-full ring-2 ring-white -bottom-1 -left-1" data-tooltip="bottom" title="' . lang('Settings.theme.' . $videoClip->theme['name']) . '" style="background-color:hsl(' . $videoClip->theme['preview'] . ')"></span><div class="flex items-center justify-center h-6 overflow-hidden bg-black rounded-sm aspect-video" data-tooltip="bottom" title="' . $videoClip->format . '"><span class="flex items-center justify-center h-full text-white bg-gray-400 ' . $formatClass[$videoClip->format] . '"><Icon glyph="play"/></span></div></div><div class="flex flex-col"><div class="text-sm">#' . $videoClip->id . ' – <span class="font-semibold group-hover:underline">' . $videoClip->title . '</span><span class="ml-1 text-sm">by ' . $videoClip->user->username . '</span></div><span class="text-xs">' . format_duration((int) $videoClip->duration) . '</span></div></a>';
+                return '<a href="' . route_to('video-clip', $videoClip->podcast_id, $videoClip->episode_id, $videoClip->id) . '" class="inline-flex items-center w-full group gap-x-2 focus:ring-accent"><div class="relative"><span class="absolute block w-3 h-3 rounded-full ring-2 ring-white -bottom-1 -left-1" data-tooltip="bottom" title="' . lang('Settings.theme.' . $videoClip->theme['name']) . '" style="background-color:hsl(' . $videoClip->theme['preview'] . ')"></span><div class="flex items-center justify-center h-6 overflow-hidden bg-black rounded-sm aspect-video" data-tooltip="bottom" title="' . lang('VideoClip.format.' . $videoClip->format) . '"><span class="flex items-center justify-center h-full text-white bg-gray-400 ' . $formatClass[$videoClip->format] . '"><Icon glyph="play"/></span></div></div><div class="flex flex-col"><div class="text-sm">#' . $videoClip->id . ' – <span class="font-semibold group-hover:underline">' . $videoClip->title . '</span><span class="ml-1 text-sm">by ' . $videoClip->user->username . '</span></div><span class="text-xs">' . format_duration((int) $videoClip->duration) . '</span></div></a>';
            },
        ],
        [
--- a/themes/cp_admin/episode/video_clips_new.php
+++ b/themes/cp_admin/episode/video_clips_new.php
@ -39,17 +39,17 @@
                name="format"
                isChecked="true"
                required="true"
-                hint="<?= lang('VideoClip.form.format.landscape_hint') ?>"><?= lang('VideoClip.form.format.landscape') ?></Forms.RadioButton>
+                hint="<?= lang('VideoClip.form.format.landscape_hint') ?>"><?= lang('VideoClip.format.landscape') ?></Forms.RadioButton>
            <Forms.RadioButton
                value="portrait"
                name="format"
                required="true"
-                hint="<?= lang('VideoClip.form.format.portrait_hint') ?>"><?= lang('VideoClip.form.format.portrait') ?></Forms.RadioButton>
+                hint="<?= lang('VideoClip.form.format.portrait_hint') ?>"><?= lang('VideoClip.format.portrait') ?></Forms.RadioButton>
            <Forms.RadioButton
                value="squared"
                name="format"
                required="true"
-                hint="<?= lang('VideoClip.form.format.squared_hint') ?>"><?= lang('VideoClip.form.format.squared') ?></Forms.RadioButton>
+                hint="<?= lang('VideoClip.form.format.squared_hint') ?>"><?= lang('VideoClip.format.squared') ?></Forms.RadioButton>
        </fieldset>
        <fieldset>
            <legend><?= lang('VideoClip.form.theme') ?></legend>
@ -61,7 +61,7 @@
                    name="theme"
                    required="true"
                    isChecked="<?= $themeName === 'pine' ? 'true' : 'false' ?>"
-                    style="--color-accent-base: <?= $colors['preview']?>"><?= lang('Settings.theme.' . $themeName) ?></Forms.ColorRadioButton>
+                    style="--color-accent-base: <?= $colors['preview']?>; --color-background-preview: <?= $colors['preview-background'] ?>"><?= lang('Settings.theme.' . $themeName) ?></Forms.ColorRadioButton>
                <?php endforeach; ?>
            </div>
        </fieldset>
--- a/writable/temp/index.html
+++ b/writable/temp/index.html
@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>403 Forbidden</title>
+  </head>
+  <body>
+    <p>Directory access is forbidden.</p>
+  </body>
+</html>