Add video block

admin/app.css

@@ -60,9 +60,10 @@ input[id*='color'] {
 }
 [class*='TopBarContainer'] + div label {
   font-size: 12px;
+  background-color: transparent !important;
 }
 [class*='ControlContainer'] > label::after {
-  content: none;
+  content: none !important;
 }
 [class*='ControlContainer'] > div {
   /* border: 1px dashed var(--grey); */
@@ -347,6 +348,28 @@ div[id^='documents-field'] {
   width: 49%;
 }
 
+/* Video */
+[id^='video-field'] {
+  background-color: var(--lightgrey) !important;
+}
+[id^='video-field'] > div:nth-child(2) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+[id^='video-field'] > div:nth-child(2) > div {
+  flex-basis: 49%;
+}
+[id^='video-field'] [class*='-ControlContainer']:has(> [for^='controls-field']),
+[id^='video-field'] [class*='-ControlContainer']:has(> [for^='screenshot-field']),
+[id^='video-field'] [class*='-ControlContainer']:has(> [for^='autoplay-field']) {
+  flex-basis: 33%;
+  flex-direction: column;
+}
+[id^='video-field'] [class*='ControlContainer'] > div {
+  padding-left: 0;
+}
+
 /* TAXONOMIES */
 [class*='-ControlContainer']:has([id^='reference']) {
   float: left;

admin/app/blocks/video.js

@@ -0,0 +1,21 @@
+import { background } from '../fields/background.js';
+import { grid } from '../fields/grid.js';
+import { heading } from '../fields/heading.js';
+import { t } from '../i18n/translater.js';
+import { video } from '../fields/video.js';
+
+export const block_video = {
+  name: 'video',
+  widget: 'object',
+  label: t.blocks.video,
+  required: false,
+  i18n: true,
+  collapsed: false,
+  summary: '{{heading.title}}',
+  fields: [
+    heading,
+    video,
+    grid, 
+    background
+  ]
+};

admin/app/fields/autoplay.js

@@ -0,0 +1,10 @@
+import { t } from '../i18n/translater.js';
+
+export const autoplay = {
+  name: 'autoplay',
+  label: t.fields.autoplay,
+  widget: 'boolean',
+  default: false,
+  required: false,
+  i18n: 'duplicate'
+};

admin/app/fields/controls.js

@@ -0,0 +1,10 @@
+import { t } from '../i18n/translater.js';
+
+export const controls = {
+  name: 'controls',
+  label: t.fields.controls,
+  widget: 'boolean',
+  default: true,
+  required: false,
+  i18n: 'duplicate'
+};

admin/app/fields/screenshot.js

@@ -0,0 +1,11 @@
+import { t } from '../i18n/translater.js';
+
+export const screenshot = {
+  name: 'screenshot',
+  label: t.fields.screenshot.label,
+  hint: t.fields.screenshot.hint,
+  widget: 'boolean',
+  default: false,
+  required: false,
+  i18n: 'duplicate'
+};

admin/app/fields/transcription.js

@@ -0,0 +1,9 @@
+import { t } from '../i18n/translater.js';
+
+export const transcription = {
+  name: 'transcription',
+  label: t.fields.transcription,
+  widget: 'text',
+  required: false,
+  i18n: true
+};

admin/app/fields/video-mp4.js

@@ -0,0 +1,23 @@
+import { mediaLibrary } from '../settings/media-library.js';
+import { t } from '../i18n/translater.js';
+let maxFileSize = 10000000;
+if (mediaLibrary) {
+  maxFileSize = 50000000;
+}
+
+export const mp4 = {
+  name: 'mp4',
+  label: t.fields.video.mp4.label,
+  widget: 'file',
+  required: false,
+  i18n: 'duplicate',
+  choose_url: false,
+  media_library: {
+    config: {
+      max_file_size: maxFileSize
+    }
+  },
+  hint: t.fields.video.mp4.hint,
+  media_folder: '/static/videos',
+  public_folder: '/videos'
+};

admin/app/fields/video-webm.js

@@ -0,0 +1,23 @@
+import { mediaLibrary } from '../settings/media-library.js';
+import { t } from '../i18n/translater.js';
+let maxFileSize = 10000000;
+if (mediaLibrary) {
+  maxFileSize = 50000000;
+}
+
+export const webm = {
+  name: 'webm',
+  label: t.fields.video.webm.label,
+  widget: 'file',
+  required: false,
+  i18n: 'duplicate',
+  choose_url: false,
+  media_library: {
+    config: {
+      max_file_size: maxFileSize
+    }
+  },
+  hint: t.fields.video.webm.hint,
+  media_folder: '/static/videos',
+  public_folder: '/videos'
+};

admin/app/fields/video.js

@@ -0,0 +1,26 @@
+import { autoplay } from './autoplay.js';
+import { controls } from './controls.js';
+import { legend } from './legend.js';
+import { mp4 } from './video-mp4.js';
+import { screenshot } from './screenshot.js';
+import { t } from '../i18n/translater.js';
+import { transcription } from './transcription.js';
+import { webm } from './video-webm.js';
+
+export const video = {
+  name: 'video',
+  label: t.fields.video.label,
+  widget: 'object',
+  required: false,
+  i18n: true,
+  collapsed: true,
+  fields: [
+    mp4,
+    webm,
+    controls, 
+    autoplay, 
+    screenshot, 
+    legend, 
+    transcription
+  ]
+};

admin/app/i18n/en/blocks.js

@@ -144,5 +144,6 @@ export const blocks = {
       }
     }
   },
-  title: 'Title'
+  title: 'Title',
+  video: 'Video'
 };

admin/app/i18n/en/fields.js

@@ -24,6 +24,7 @@ export const fields = {
     label: 'Authors?',
     hint: 'Many authors possible'
   },
+  autoplay: 'Autoplay?',
   background: 'Add background color?',
   background_color: 'Background color',
   blank: 'Open in new page?',
@@ -96,6 +97,7 @@ export const fields = {
   color: 'Color',
   column: 'Number of columns',
   contact: 'Contact',
+  controls: 'Control buttons?',
   count: 'Number of elements',
   credit: 'Credit',
   cta: 'Button',
@@ -290,6 +292,10 @@ export const fields = {
   show_gauge: 'Display a progress gauge?',
   show_more: 'Display a button to discover more elements?',
   sold: 'Sold?',
+  screenshot: {
+    label: 'Screenshot?',
+    hint: 'This will add a browser skin'
+  }, 
   state: {
     label: 'State',
     options: {
@@ -314,13 +320,26 @@ export const fields = {
   text_area: 'Text',
   text_markdown: 'Text',
   title: 'Title / Name',
+  transcription: 'Transcription',
   twitter: {
     label: 'Twitter',
     hint: 'Username'
   },
   url: 'URL',
   value: 'Value',
   value_number: 'Value',
+  video: {
+    label: 'Video',
+    mp4: {
+      label: 'MP4',
+      hint: 'Video in MP4 format'
+    },
+    poster: 'Image from video',
+    webm: {
+      label: 'WEBM',
+      hint: 'Video in WEBM format'
+    }
+  },
   website: {
     label: 'Website',
     hint: 'URL (https://…)'

admin/app/i18n/fr/blocks.js

@@ -144,5 +144,6 @@ export const blocks = {
       }
     }
   },
-  title: 'Titre'
+  title: 'Titre',
+  video: 'Vidéo'
 };

admin/app/i18n/fr/fields.js

@@ -24,6 +24,7 @@ export const fields = {
     label: 'Auteurs ?',
     hint: 'Plusieurs auteurs possible'
   },
+  autoplay: 'Lecture automatique ?',
   background: 'Ajouter une couleur d’arrière plan ?',
   background_color: 'Couleur du fond',
   blank: 'Ouvrir le lien dans une nouvelle fenêtre ?',
@@ -96,6 +97,7 @@ export const fields = {
   color: 'Couleur',
   column: 'Nombre de colonnes',
   contact: 'Contact',
+  controls: 'Boutons de controle ?',
   count: 'Nombre d’éléments',
   credit: 'Crédit',
   cta: 'Bouton',
@@ -289,6 +291,10 @@ export const fields = {
   show_gauge: 'Afficher une jaune de progression ?',
   show_more: 'Afficher un bouton pour découvrir plus d’éléments ?',
   sold: 'Vendu ?',
+  screenshot: {
+    label: 'Capture d’écran ?',
+    hint: 'Ceci ajoutera un habillage navigateur'
+  },
   state: {
     label: 'État',
     options: {
@@ -313,13 +319,26 @@ export const fields = {
   text_area: 'Texte',
   text_markdown: 'Texte',
   title: 'Titre / Nom',
+  transcription: 'Transcription',
   twitter: {
     label: 'Twitter',
     hint: "Nom d'utilisateur"
   },
   url: 'URL',
   value: 'Valeur',
   value_number: 'Valeur',
+  video: {
+    label: 'Vidéo',
+    mp4: {
+      label: 'MP4',
+      hint: 'Vidéo au format MP4'
+    },
+    poster: 'Image de la vidéo',
+    webm: {
+      label: 'WEBM',
+      hint: 'Vidéo au format WEBM'
+    }
+  },
   website: {
     label: 'Site web',
     hint: 'URL (https://…)'

admin/app/settings/available-blocks.js

@@ -29,3 +29,4 @@ export { block_selectedprojects } from '../blocks/selected-projects.js';
 // export { block_selectedservices } from "../blocks/selected-services.js"
 export { block_testimonials } from '../blocks/testimonials.js';
 export { block_title } from '../blocks/title.js';
+export { block_video } from '../blocks/video.js';