From 39a83edce98abf3e888bdcc8abf2ae45f2f4fada Mon Sep 17 00:00:00 2001 From: Harald Atteneder Date: Thu, 31 Oct 2024 21:34:50 +0100 Subject: [PATCH 1/3] Add HTML5 audio and video player to getPreviewHtml() --- src/elements/Asset.php | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/src/elements/Asset.php b/src/elements/Asset.php index acde040fb27..c59cabf0fdd 100644 --- a/src/elements/Asset.php +++ b/src/elements/Asset.php @@ -2749,6 +2749,32 @@ public function getPreviewHtml(): string ($userSession->getId() == $this->uploaderId || $userSession->checkPermission("editPeerImages:$volume->uid")) ); + switch ($this->kind) { + case Asset::KIND_VIDEO: + $previewInner = + Html::tag('video', null, [ + 'class' => 'preview-thumb', + 'src' => $this->url, + 'controls' => true, + 'preload' => 'metadata', + ]); + break; + case Asset::KIND_AUDIO: + $previewInner = + Html::tag('audio', null, [ + 'class' => 'preview-thumb', + 'src' => $this->url, + 'controls' => true, + 'preload' => 'metadata', + ]); + break; + default: + $previewInner = + Html::tag('div', $this->getPreviewThumbImg(350, 190), [ + 'class' => 'preview-thumb', + ]); + } + $previewThumbHtml = Html::beginTag('div', [ 'id' => 'thumb-container', @@ -2758,9 +2784,7 @@ public function getPreviewHtml(): string $this->hasCheckeredThumb() ? 'checkered' : null, ]), ]) . - Html::tag('div', $this->getPreviewThumbImg(350, 190), [ - 'class' => 'preview-thumb', - ]) . + $previewInner . Html::endTag('div'); // .preview-thumb-container if ($previewable || $editable) { From 3cfee1ba0637c6c5fa7b92d91bd9c155988f02e5 Mon Sep 17 00:00:00 2001 From: Harald Atteneder Date: Thu, 31 Oct 2024 21:46:20 +0100 Subject: [PATCH 2/3] use empty string as HTML tag content --- src/elements/Asset.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/Asset.php b/src/elements/Asset.php index c59cabf0fdd..94873cbec82 100644 --- a/src/elements/Asset.php +++ b/src/elements/Asset.php @@ -2752,7 +2752,7 @@ public function getPreviewHtml(): string switch ($this->kind) { case Asset::KIND_VIDEO: $previewInner = - Html::tag('video', null, [ + Html::tag('video', '', [ 'class' => 'preview-thumb', 'src' => $this->url, 'controls' => true, @@ -2761,7 +2761,7 @@ public function getPreviewHtml(): string break; case Asset::KIND_AUDIO: $previewInner = - Html::tag('audio', null, [ + Html::tag('audio', '', [ 'class' => 'preview-thumb', 'src' => $this->url, 'controls' => true, From 5c51e7212d0308d79205729c448f05538eecd32f Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Tue, 5 Nov 2024 10:06:51 -0600 Subject: [PATCH 3/3] Minor adjustments --- src/elements/Asset.php | 14 ++++++++------ src/web/assets/cp/src/css/_main.scss | 1 + 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/elements/Asset.php b/src/elements/Asset.php index 94873cbec82..1e27aabe942 100644 --- a/src/elements/Asset.php +++ b/src/elements/Asset.php @@ -46,7 +46,6 @@ use craft\events\DefineAssetUrlEvent; use craft\events\GenerateTransformEvent; use craft\fieldlayoutelements\assets\AltField; -use craft\fs\Temp; use craft\helpers\ArrayHelper; use craft\helpers\Assets; use craft\helpers\Cp; @@ -2752,18 +2751,21 @@ public function getPreviewHtml(): string switch ($this->kind) { case Asset::KIND_VIDEO: $previewInner = - Html::tag('video', '', [ - 'class' => 'preview-thumb', + Html::tag('video', Html::tag('source', '', [ + 'type' => $this->getMimeType(), 'src' => $this->url, + ]), [ + 'class' => 'preview-thumb', 'controls' => true, 'preload' => 'metadata', ]); break; case Asset::KIND_AUDIO: $previewInner = - Html::tag('audio', '', [ - 'class' => 'preview-thumb', + Html::tag('audio', Html::tag('source', '', [ 'src' => $this->url, + 'type' => $this->getMimeType(), + ]), [ 'controls' => true, 'preload' => 'metadata', ]); @@ -2774,7 +2776,7 @@ public function getPreviewHtml(): string 'class' => 'preview-thumb', ]); } - + $previewThumbHtml = Html::beginTag('div', [ 'id' => 'thumb-container', diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss index ca814a59ac5..a05eb810814 100644 --- a/src/web/assets/cp/src/css/_main.scss +++ b/src/web/assets/cp/src/css/_main.scss @@ -6589,6 +6589,7 @@ $min2ColWidth: 400px; display: flex; flex-direction: row; align-items: center; + justify-content: center; height: 190px; background-color: var(--gray-900); margin-block: 0 var(--spacing);