Implement video region support

src/web/public/css/theme-custom.css

@@ -759,6 +759,13 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   display: block;
 }
 
+.slide-preview-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
 .slide-preview-background {
   width: 100%;
   height: 100%;
@@ -1014,6 +1021,10 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   border: 0;
 }
 
+.slide-image-region-preview-shell video.slide-image-region-preview {
+  pointer-events: none;
+}
+
 .slide-image-region-preview-empty {
   display: flex;
   align-items: center;
@@ -1220,7 +1231,6 @@ html[data-bs-theme='dark'] .ck-body-wrapper .ck.ck-color-grid__tile {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 1rem;
 }
 
 .region-info-card .card-title {
@@ -1680,6 +1690,34 @@ td[data-label="Actions"] > div {
   min-width: 6rem;
 }
 
+.playlist-duration-input::-webkit-outer-spin-button,
+.playlist-duration-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.playlist-duration-input {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.playlist-duration-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  text-align: left;
+}
+
+.playlist-use-video-duration {
+  white-space: nowrap;
+}
+
+td[data-label="Duration"] {
+  text-align: left;
+}
+
 table.table > :not(caption) > * > * {
   vertical-align: middle;
 }