[6453,6467] Handle previous xml format not having the url prop, add v…

…ideo preview (#3645) craftercms/craftercms#6453,craftercms/craftercms#6467
craftercms · Jan 25, 2024 · 57fa518 · 57fa518
1 parent e3db32b
commit 57fa518
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git a/static-assets/components/cstudio-forms/controls/aws-file-upload.js b/static-assets/components/cstudio-forms/controls/aws-file-upload.js
@@ -53,20 +53,22 @@
       getName: () => 'aws-file-upload',
 
       setValue: function (value) {
-        var validationResult = true;
+        let validationResult = true;
         const item = value?.[0];
-        if (item?.url) {
-          const url = item.url;
+        if (item) {
+          const url = item.url ?? '';
           const name = item.name ?? item.key;
-          const bucket = item.bucketName ?? item.bucket ?? '';
+          const bucket = item.bucketName ? `${item.bucketName}/${item.prefix}` : item.bucket ?? '';
           this.value = [{ key: name, bucket, url }];
-          this.fileEl.innerHTML = `<code>${url}</code><code>s3://${bucket}/${name}*</code>`;
+          this.fileEl.innerHTML = `<code>s3://${bucket}/${name}*</code><code>${url}</code>`;
           this.form.updateModel(this.id, this.value);
-          this.previewEl.innerHTML = /\.(jpg|jpeg|png|gif|bmp|ico|svg)$/i.test(url)
+          this.previewEl.innerHTML = /\.(jpg|jpeg|png|gif|bmp|ico|svg|webp)$/i.test(url)
             ? `<img src="${url}" />`
+            : /\.(mp4|webm|ogv)$/i.test(url)
+            ? `<video controls muted><source src="${url}" type="video/${url.match(/\.(.+)$/)?.[1]}"></video>`
             : /\.(pdf|html|js|css|txt|json|md|jsx|ts|tsx|yaml|ftl)$/i.test(url)
             ? `<iframe src="${url}" />`
-            : '';
+            : '(Preview not available)';
           this.clearError('required');
         } else if (this.required) {
           validationResult = false;
@@ -89,18 +91,18 @@
       render: function (config, containerEl, lastTwo) {
         // language=html
         containerEl.innerHTML = `
-        <span class="cstudio-form-field-title">${config.title}</span>
-        <span class="validation-hint cstudio-form-control-validation fa fa-check"></span>
-        <div class="aws-file-upload-control-container cstudio-form-control-input-container">
-          <input
-            type="file"
-            name="file"
-            class="datum cstudio-form-control-input"
-          >
-          <div data-name="fileEl" class="aws-file-upload-url-el"></div>
-          <div data-name="previewEl" class="aws-file-upload-preview-el"></div>
-        </div>
-      `;
+          <span class="cstudio-form-field-title">${config.title}</span>
+          <span class="validation-hint cstudio-form-control-validation fa fa-check"></span>
+          <div class="aws-file-upload-control-container cstudio-form-control-input-container">
+            <input
+              type="file"
+              name="file"
+              class="datum cstudio-form-control-input"
+            >
+            <div data-name="fileEl" class="aws-file-upload-url-el"></div>
+            <div data-name="previewEl" class="aws-file-upload-preview-el"></div>
+          </div>
+        `;
         this.fileEl = containerEl.querySelector('[data-name="fileEl"]');
         this.previewEl = containerEl.querySelector('[data-name="previewEl"]');
         var inputEl = (this.inputEl = containerEl.querySelector('input'));

diff --git a/static-assets/themes/cstudioTheme/css/forms-default.css b/static-assets/themes/cstudioTheme/css/forms-default.css
@@ -1754,7 +1754,7 @@ body.yui-skin-cstudioTheme.masked {
 
 input[type='file'] {
   cursor: pointer;
-  padding: 9px 10px 44px 10px;
+  padding: 4px 10px 40px 4px;
   box-sizing: border-box;
 }
 
@@ -1785,6 +1785,7 @@ input[type='file']::file-selector-button {
   border-radius: 4px;
   overflow: hidden;
   text-align: center;
+  margin: 10px 0;
 }
 
 .aws-file-upload-preview-el img {
@@ -1793,6 +1794,12 @@ input[type='file']::file-selector-button {
   border-radius: 4px;
 }
 
+.aws-file-upload-preview-el video {
+  max-height: 250px;
+  border-radius: 4px;
+  background-color: #555;
+}
+
 .aws-file-upload-preview-el iframe {
   border: 0;
   width: 100%;