diff --git a/app/Libraries/MediaClipper/Config/MediaClipper.php b/app/Libraries/MediaClipper/Config/MediaClipper.php
index c4571851990bfce718910dc87333e706d6ddd1c0..f4274d6de256761f601f4dfc9e23fa3e43e6d661 100644
--- a/app/Libraries/MediaClipper/Config/MediaClipper.php
+++ b/app/Libraries/MediaClipper/Config/MediaClipper.php
@@ -14,6 +14,8 @@ class MediaClipper extends BaseConfig
public string $wavesMask = APPPATH . 'Libraries/MediaClipper/waves-mask.png';
+ public string $watermark = APPPATH . 'Libraries/MediaClipper/castopod-logo.png';
+
/**
* @var array<string, array<string, int|array<string, float|int|string>>>
*/
@@ -57,9 +59,15 @@ class MediaClipper extends BaseConfig
'timestamp' => [
'fontsize' => 32,
'padding' => 10,
- 'x' => 1680,
+ 'x' => 1620,
'y' => 985,
],
+ 'watermark' => [
+ 'width' => 90,
+ 'height' => 72,
+ 'x' => 140,
+ 'y' => 960,
+ ],
'progressbar' => [
'height' => 10,
],
@@ -117,10 +125,16 @@ class MediaClipper extends BaseConfig
],
'timestamp' => [
'fontsize' => 48,
- 'padding' => 10,
- 'x' => 735,
+ 'padding' => 14,
+ 'x' => 734,
'y' => 1800,
],
+ 'watermark' => [
+ 'width' => 120,
+ 'height' => 96,
+ 'x' => 130,
+ 'y' => 1770,
+ ],
'progressbar' => [
'height' => 10,
],
@@ -183,6 +197,12 @@ class MediaClipper extends BaseConfig
'x' => 855,
'y' => 1070,
],
+ 'watermark' => [
+ 'width' => 120,
+ 'height' => 96,
+ 'x' => 130,
+ 'y' => 1040,
+ ],
'progressbar' => [
'height' => 10,
],
@@ -209,6 +229,8 @@ class MediaClipper extends BaseConfig
*/
public array $themes = [
'pine' => [
+ // Preview must be a HSL colorscheme string
+ 'preview' => '174 100% 29%',
'background' => [0, 86, 74],
'text' => [255, 255, 255],
// subtitle hex color is BGR (Blue, Green, Red),
@@ -220,7 +242,93 @@ class MediaClipper extends BaseConfig
'progressbar' => '009486',
'timestampBg' => '00564A',
'timestampText' => 'FFFFFF',
- 'soundwaves' => 'F2FAF9',
+ 'watermarkBg' => '00564A',
+ 'soundwaves' => [231, 249, 228],
+ ],
+ 'crimson' => [
+ // Preview must be a HSL colorscheme string
+ 'preview' => '350 87% 61%',
+ 'background' => [179, 31, 57],
+ 'text' => [255, 255, 255],
+ // subtitle hex color is BGR (Blue, Green, Red),
+ 'subtitles' => 'FFFFFF',
+ // quotes image MUST BE black
+ 'quotes' => [242, 70, 100],
+ 'episodeNumberingBg' => [152, 16, 43],
+ 'episodeNumberingText' => [255, 255, 255],
+ 'progressbar' => 'F24664',
+ 'timestampBg' => 'B31F39',
+ 'timestampText' => 'FFFFFF',
+ 'watermarkBg' => 'B31F39',
+ 'soundwaves' => [253, 206, 215],
+ ],
+ 'lake' => [
+ // Preview must be a HSL colorscheme string
+ 'preview' => '194 100% 44%',
+ 'background' => [0, 86, 113],
+ 'text' => [255, 255, 255],
+ // subtitle hex color is BGR (Blue, Green, Red),
+ 'subtitles' => 'FFFFFF',
+ // quotes image MUST BE black
+ 'quotes' => [0, 171, 225],
+ 'episodeNumberingBg' => [0, 43, 57],
+ 'episodeNumberingText' => [255, 255, 255],
+ 'progressbar' => '00ABE1',
+ 'timestampBg' => '005671',
+ 'timestampText' => 'FFFFFF',
+ 'watermarkBg' => '005671',
+ 'soundwaves' => [214, 245, 255],
+ ],
+ 'amber' => [
+ // Preview must be a HSL colorscheme string
+ 'preview' => '17 100% 57%',
+ 'background' => [177, 50, 0],
+ 'text' => [255, 255, 255],
+ // subtitle hex color is BGR (Blue, Green, Red),
+ 'subtitles' => 'FFFFFF',
+ // quotes image MUST BE black
+ 'quotes' => [255, 96, 34],
+ 'episodeNumberingBg' => [121, 34, 0],
+ 'episodeNumberingText' => [255, 255, 255],
+ 'progressbar' => 'FF6022',
+ 'timestampBg' => 'B13200',
+ 'timestampText' => 'FFFFFF',
+ 'watermarkBg' => 'B13200',
+ 'soundwaves' => [255, 213, 197],
+ ],
+ 'jacaranda' => [
+ // Preview must be a HSL colorscheme string
+ 'preview' => '254 72% 52%',
+ 'background' => [47, 21, 132],
+ 'text' => [255, 255, 255],
+ // subtitle hex color is BGR (Blue, Green, Red),
+ 'subtitles' => 'FFFFFF',
+ // quotes image MUST BE black
+ 'quotes' => [86, 45, 221],
+ 'episodeNumberingBg' => [30, 14, 84],
+ 'episodeNumberingText' => [255, 255, 255],
+ 'progressbar' => '562DDD',
+ 'timestampBg' => '2F1584',
+ 'timestampText' => 'FFFFFF',
+ 'watermarkBg' => '2F1584',
+ 'soundwaves' => [199, 185, 244],
+ ],
+ 'onyx' => [
+ // Preview must be a HSL colorscheme string
+ 'preview' => '240 17% 2%',
+ 'background' => [5, 5, 7],
+ 'text' => [255, 255, 255],
+ // subtitle hex color is BGR (Blue, Green, Red),
+ 'subtitles' => 'FFFFFF',
+ // quotes image MUST BE black
+ 'quotes' => [38, 38, 49],
+ 'episodeNumberingBg' => [0, 0, 0],
+ 'episodeNumberingText' => [255, 255, 255],
+ 'progressbar' => 'D5D5E1',
+ 'timestampBg' => '050507',
+ 'timestampText' => 'FFFFFF',
+ 'watermarkBg' => '050507',
+ 'soundwaves' => [213, 213, 225],
],
];
}
diff --git a/app/Libraries/MediaClipper/VideoClip.php b/app/Libraries/MediaClipper/VideoClip.php
index 909bd13e823d18a266ebe9c15db7c93415aace16..d1f11de5b97360fbb4bd4f4a5cedaa8a14621169 100644
--- a/app/Libraries/MediaClipper/VideoClip.php
+++ b/app/Libraries/MediaClipper/VideoClip.php
@@ -13,6 +13,11 @@ namespace MediaClipper;
use App\Entities\Episode;
use GdImage;
+/**
+ * TODO: refactor this by splitting image manipulations + video generation
+ *
+ * @phpstan-ignore-next-line
+ */
class VideoClip
{
/**
@@ -44,21 +49,11 @@ class VideoClip
protected ?string $episodeNumbering = null;
- /**
- * @var 'landscape'|'portrait'|'squared'
- */
- protected string $format = 'landscape';
-
/**
* @var array<string, mixed>
*/
protected array $dimensions = [];
- /**
- * @var 'pine'|'crimson'|'lake'|'amber'|'jacaranda'|'onyx'
- */
- protected string $theme = 'pine';
-
/**
* @var array<string, mixed>
*/
@@ -72,11 +67,10 @@ class VideoClip
protected Episode $episode,
protected float $start,
protected float $end,
- string $format,
- string $theme,
+ protected string $format = 'landscape',
+ protected string $theme = 'pine',
) {
$this->duration = $end - $start;
- $this->format = $format;
$this->episodeNumbering = $this->episodeNumbering($this->episode->number, $this->episode->season_number);
$this->dimensions = config('MediaClipper')
->formats[$format];
@@ -95,8 +89,8 @@ class VideoClip
$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}.png";
- $this->videoClipOutput = $podcastFolder . "/{$this->episode->slug}-clip-{$this->start}-to-{$this->end}-{$this->format}.mp4";
+ $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";
}
public function soundbite(): void
@@ -132,23 +126,30 @@ class VideoClip
{
// @phpstan-ignore
$filters = [
- "[0:a]aformat=channel_layouts=mono,showwaves=s={$this->dimensions['soundwaves']['width']}x{$this->dimensions['soundwaves']['height']}:mode=cline:rate=10:colors=0xFFFFFF,format=yuva420p[waves]",
+ "[0:a]aformat=channel_layouts=mono,showwaves=s={$this->dimensions['soundwaves']['width']}x{$this->dimensions['soundwaves']['height']}:mode=cline:rate=10:colors=white,format=rgb24[waves]",
"[waves]scale={$this->dimensions['width']}:{$this->dimensions['height']}:flags=neighbor[resizedwaves]",
'[resizedwaves][3:v][4:v][5:v]threshold[cleanwaves]',
'[cleanwaves][2:v]alphamerge[waves_t]',
'[4:v][waves_t]overlay=x=0:y=0:shortest=1[waves_t2]',
'[waves_t2]split[m][a]',
'[m][a]alphamerge[waves_t3]',
- "[waves_t3]scale={$this->dimensions['soundwaves']['rescaleWidth']}:{$this->dimensions['soundwaves']['rescaleHeight']}[waves_final]",
+ "[waves_t3]scale={$this->dimensions['soundwaves']['rescaleWidth']}:{$this->dimensions['soundwaves']['rescaleHeight']},lutrgb=r='if(gt(val,100),{$this->colors['soundwaves'][0]},val)':g='if(gt(val,100),{$this->colors['soundwaves'][1]},val)':b='if(gt(val,100),{$this->colors['soundwaves'][2]},val)'[waves_final]",
"[1:v][waves_final]overlay=x={$this->dimensions['soundwaves']['x']}:y={$this->dimensions['soundwaves']['y']}:shortest=1,drawtext=fontfile=" . $this->getFont(
'timestamp'
- ) . ":text='%{pts\:gmtime\:{$this->start}\:%H\\\\\\\\\\:%M\\\\\\\\\\:%S\}':x={$this->dimensions['timestamp']['x']}:y={$this->dimensions['timestamp']['y']}:fontsize={$this->dimensions['timestamp']['fontsize']}:fontcolor=0x{$this->colors['timestampText']}:box=1:boxcolor=0x{$this->colors['timestampBg']}:boxborderw={$this->dimensions['timestamp']['padding']},format=yuv420p,colormatrix=bt601:bt2020[v3]",
+ ) . ":text='%{pts\:gmtime\:{$this->start}\:%H\\\\\\\\\\:%M\\\\\\\\\\:%S\}':x={$this->dimensions['timestamp']['x']}:y={$this->dimensions['timestamp']['y']}:fontsize={$this->dimensions['timestamp']['fontsize']}:fontcolor=0x{$this->colors['timestampText']}:box=1:boxcolor=0x{$this->colors['timestampBg']}:boxborderw={$this->dimensions['timestamp']['padding']}[v3]",
"color=c=0x{$this->colors['progressbar']}:s={$this->dimensions['width']}x{$this->dimensions['progressbar']['height']}[progressbar]",
"[v3][progressbar]overlay=-w+(w/{$this->duration})*t:0:shortest=1:format=rgb,subtitles={$this->subtitlesClipOutput}:fontsdir=" . config(
'MediaClipper'
- )->fontsFolder . ":force_style='Fontname=" . self::FONTS['subtitles'] . ",Alignment=5,Fontsize={$this->dimensions['subtitles']['fontsize']},PrimaryColour=&H{$this->colors['subtitles']}&,BorderStyle=1,Outline=0,Shadow=0,MarginL={$this->dimensions['subtitles']['marginL']},MarginR={$this->dimensions['subtitles']['marginR']},MarginV={$this->dimensions['subtitles']['marginV']}',format=yuv420p,colormatrix=bt601:bt2020[outv]",
+ )->fontsFolder . ":force_style='Fontname=" . self::FONTS['subtitles'] . ",Alignment=5,Fontsize={$this->dimensions['subtitles']['fontsize']},PrimaryColour=&H{$this->colors['subtitles']}&,BorderStyle=1,Outline=0,Shadow=0,MarginL={$this->dimensions['subtitles']['marginL']},MarginR={$this->dimensions['subtitles']['marginR']},MarginV={$this->dimensions['subtitles']['marginV']}'[outv]",
+ "[6:v]scale={$this->dimensions['watermark']['width']}:{$this->dimensions['watermark']['height']}[watermark]",
+ "color=0x{$this->colors['watermarkBg']}:{$this->dimensions['watermark']['width']}x{$this->dimensions['watermark']['height']}[over]",
+ '[over][watermark]overlay=x=0:y=0:shortest=1[watermark_box]',
+ "[outv][watermark_box]overlay=x={$this->dimensions['watermark']['x']}:y={$this->dimensions['watermark']['y']}:shortest=1[watermarked]",
];
+ $watermark = config('MediaClipper')
+ ->watermark;
+
$videoClipCmd = [
'ffmpeg -y',
"-i {$this->soundbiteOutput}",
@@ -156,13 +157,13 @@ class VideoClip
"-loop 1 -framerate 30 -i {$this->dimensions['soundwaves']['mask']}",
"-f lavfi -i color=gray:{$this->dimensions['width']}x{$this->dimensions['height']}",
"-f lavfi -i color=black:{$this->dimensions['width']}x{$this->dimensions['height']}",
- "-f lavfi -i color=0x{$this->colors['soundwaves']}:{$this->dimensions['width']}x{$this->dimensions['height']}",
+ "-f lavfi -i color=white:{$this->dimensions['width']}x{$this->dimensions['height']}",
+ "-loop 1 -framerate 1 -i {$watermark}",
'-filter_complex "' . implode(';', $filters) . '"',
- '-map "[outv]"',
+ '-map "[watermarked]"',
'-map 0:a',
'-acodec copy',
- '-vcodec libx264',
- '-pix_fmt yuv420p',
+ '-vcodec libx264rgb',
"{$this->videoClipOutput}",
];
@@ -306,10 +307,16 @@ class VideoClip
return false;
}
- imagefilter($quotes, IMG_FILTER_COLORIZE, ...$this->colors['quotes']);
+ $cleanedQuotes = $this->cleanTransparency($quotes);
+
+ if (! $cleanedQuotes) {
+ return false;
+ }
+ imagefilter($cleanedQuotes, IMG_FILTER_CONTRAST, 255);
+ imagefilter($cleanedQuotes, IMG_FILTER_COLORIZE, ...$this->colors['quotes']);
$scaledQuotes = $this->scaleImage(
- $quotes,
+ $cleanedQuotes,
$this->dimensions['quotes']['width'],
$this->dimensions['quotes']['height']
);
@@ -318,6 +325,7 @@ class VideoClip
return false;
}
+ imagesavealpha($scaledQuotes, true);
$this->overlayImages(
$background,
$scaledQuotes,
@@ -570,6 +578,32 @@ class VideoClip
return true;
}
+ /**
+ * This helps getting a truly transparent background for images with transparency:
+ * https://stackoverflow.com/a/2611911
+ */
+ private function cleanTransparency(GdImage $image): GdImage | false
+ {
+ $imageBg = imagecolorallocate($image, 0, 0, 0);
+ if ($imageBg === false) {
+ return false;
+ }
+
+ // removing the black from the image
+ imagecolortransparent($image, $imageBg);
+
+ // turning off alpha blending (to ensure alpha channel information
+ // is preserved, rather than removed (blending with the rest of the
+ // image in the form of black))
+ imagealphablending($image, false);
+
+ // turning on alpha channel information saving (to ensure the full range
+ // of transparency is preserved)
+ imagesavealpha($image, true);
+
+ return $image;
+ }
+
/**
* @return array<int, string>|false
*/
diff --git a/app/Libraries/MediaClipper/castopod-logo.png b/app/Libraries/MediaClipper/castopod-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa6544aaa2087553e12aa7f77e084429f7d3abbb
Binary files /dev/null and b/app/Libraries/MediaClipper/castopod-logo.png differ
diff --git a/app/Views/Components/Forms/ColorRadioButton.php b/app/Views/Components/Forms/ColorRadioButton.php
index 906eb69329a83cab2ec99dfe4b053ed62f5dce49..a3454f54ba474cd2f0faf556d8b30dfc85224647 100644
--- a/app/Views/Components/Forms/ColorRadioButton.php
+++ b/app/Views/Components/Forms/ColorRadioButton.php
@@ -8,6 +8,8 @@ class ColorRadioButton extends FormComponent
{
protected bool $isChecked = false;
+ protected string $style = '';
+
public function setIsChecked(string $value): void
{
$this->isChecked = $value === 'true';
@@ -26,7 +28,7 @@ class ColorRadioButton extends FormComponent
);
return <<<HTML
- <div class="{$this->class}">
+ <div class="{$this->class}" style="{$this->style}">
{$radioInput}
<label for="{$this->value}" title="{$this->slot}" data-tooltip="bottom"></label>
</div>
diff --git a/themes/cp_admin/episode/video_clips_new.php b/themes/cp_admin/episode/video_clips_new.php
index abcb48b22ad671032408feb9f44b5fac9cc10453..93ce42a0f2e8aa76f2fdb692591d6b2ef8f5e736 100644
--- a/themes/cp_admin/episode/video_clips_new.php
+++ b/themes/cp_admin/episode/video_clips_new.php
@@ -29,12 +29,13 @@
</fieldset>
<div class="grid gap-4 grid-cols-colorButtons">
- <?php foreach (config('Colors')->themes as $themeName => $color): ?>
+ <?php foreach (config('MediaClipper')->themes as $themeName => $colors): ?>
<Forms.ColorRadioButton
- class="theme-<?= $themeName ?> mx-auto"
+ class="mx-auto"
value="<?= $themeName ?>"
name="theme"
- isChecked="<?= $themeName === 'pine' ? 'true' : 'false' ?>" ><?= lang('Settings.theme.' . $themeName) ?></Forms.ColorRadioButton>
+ isChecked="<?= $themeName === 'pine' ? 'true' : 'false' ?>"
+ style="--color-accent-base: <?= $colors['preview']?>"><?= lang('Settings.theme.' . $themeName) ?></Forms.ColorRadioButton>
<?php endforeach; ?>
</div>