@norskvideo/norsk-studio 1.27.0-2025-03-05-b23dba52 → 1.27.0-2025-03-10-85778fae

package/static/style.css

@@ -1231,10 +1231,6 @@ input[type="range"]::-ms-fill-lower {
   right: 0.25rem;
 }
 
-.right-2\.5 {
-  right: 0.625rem;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -1383,6 +1379,11 @@ input[type="range"]::-ms-fill-lower {
   margin-bottom: 2rem;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .-mb-px {
   margin-bottom: -1px;
 }
@@ -1495,10 +1496,6 @@ input[type="range"]::-ms-fill-lower {
   margin-inline-start: 0.75rem;
 }
 
-.ms-auto {
-  margin-inline-start: auto;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -1703,10 +1700,6 @@ input[type="range"]::-ms-fill-lower {
   height: 18px;
 }
 
-.h-\[24px\] {
-  height: 24px;
-}
-
 .h-\[32px\] {
   height: 32px;
 }
@@ -1727,10 +1720,6 @@ input[type="range"]::-ms-fill-lower {
   height: 64px;
 }
 
-.h-\[calc\(100\%-1rem\)\] {
-  height: calc(100% - 1rem);
-}
-
 .h-auto {
   height: auto;
 }
@@ -1752,18 +1741,10 @@ input[type="range"]::-ms-fill-lower {
   height: 100vh;
 }
 
-.max-h-\[24px\] {
-  max-height: 24px;
-}
-
 .max-h-\[90dvh\] {
   max-height: 90dvh;
 }
 
-.max-h-full {
-  max-height: 100%;
-}
-
 .w-1\/2 {
   width: 50%;
 }
@@ -1860,10 +1841,6 @@ input[type="range"]::-ms-fill-lower {
   width: 18px;
 }
 
-.w-\[24px\] {
-  width: 24px;
-}
-
 .w-\[272px\] {
   width: 272px;
 }
@@ -1942,10 +1919,6 @@ input[type="range"]::-ms-fill-lower {
   max-width: 100vw;
 }
 
-.max-w-\[24px\] {
-  max-width: 24px;
-}
-
 .max-w-lg {
   max-width: 32rem;
 }
@@ -2258,6 +2231,10 @@ input[type="range"]::-ms-fill-lower {
   gap: 0.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -2375,6 +2352,10 @@ input[type="range"]::-ms-fill-lower {
   overflow: visible !important;
 }
 
+.overflow-visible {
+  overflow: visible;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -2637,11 +2618,6 @@ input[type="range"]::-ms-fill-lower {
   border-style: none;
 }
 
-.\!border-primary-700 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1)) !important;
-}
-
 .border-amber-500 {
   --tw-border-opacity: 1;
   border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
@@ -2662,11 +2638,6 @@ input[type="range"]::-ms-fill-lower {
   border-color: rgb(28 100 242 / var(--tw-border-opacity, 1));
 }
 
-.border-blue-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(26 86 219 / var(--tw-border-opacity, 1));
-}
-
 .border-blue-800 {
   --tw-border-opacity: 1;
   border-color: rgb(30 66 159 / var(--tw-border-opacity, 1));
@@ -2876,16 +2847,6 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
 }
 
-.\!bg-primary-600 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)) !important;
-}
-
-.\!bg-primary-700 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)) !important;
-}
-
 .\!bg-transparent {
   background-color: transparent !important;
 }
@@ -3678,6 +3639,10 @@ input[type="range"]::-ms-fill-lower {
   text-align: start;
 }
 
+.align-bottom {
+  vertical-align: bottom;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -3816,10 +3781,6 @@ input[type="range"]::-ms-fill-lower {
   line-height: 1;
 }
 
-.leading-relaxed {
-  line-height: 1.625;
-}
-
 .leading-tight {
   line-height: 1.25;
 }
@@ -3828,6 +3789,11 @@ input[type="range"]::-ms-fill-lower {
   letter-spacing: -0.025em;
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(63 131 248 / var(--tw-text-opacity, 1));
@@ -4435,6 +4401,12 @@ input[type="range"]::-ms-fill-lower {
   transition-duration: 150ms;
 }
 
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4718,6 +4690,21 @@ input[type="range"]::-ms-fill-lower {
   padding-bottom: 1em;
 }
 
+/* For some reason, type=file was excluded */
+
+input[type="file"]:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty, );
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #1C64F2;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #1C64F2;
+}
+
 .after\:absolute::after {
   content: var(--tw-content);
   position: absolute;
@@ -4847,6 +4834,12 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(126 58 242 );
 }
 
+.hover\:scale-\[103\%\]:hover {
+  --tw-scale-x: 103%;
+  --tw-scale-y: 103%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:cursor-not-allowed:hover {
   cursor: not-allowed;
 }
@@ -4856,11 +4849,6 @@ input[type="range"]::-ms-fill-lower {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
-.hover\:\!bg-primary-800:hover {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1)) !important;
-}
-
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(195 221 253 / var(--tw-bg-opacity, 1));
@@ -5019,6 +5007,11 @@ input[type="range"]::-ms-fill-lower {
   text-decoration-line: underline;
 }
 
+.hover\:drop-shadow-md:hover {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .focus\:z-10:focus {
   z-index: 10;
 }
@@ -5111,11 +5104,6 @@ input[type="range"]::-ms-fill-lower {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:\!ring-primary-300:focus {
-  --tw-ring-opacity: 1 !important;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1)) !important;
-}
-
 .focus\:ring-blue-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity, 1));
@@ -5554,11 +5542,20 @@ input[type="range"]::-ms-fill-lower {
   border-bottom-right-radius: 0.5rem;
 }
 
+.group:hover .group-hover\:border-transparent {
+  border-color: transparent;
+}
+
 .group:hover .group-hover\:bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(195 221 253 / var(--tw-bg-opacity, 1));
 }
 
+.group:hover .group-hover\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(63 131 248 / var(--tw-bg-opacity, 1));
+}
+
 .group:hover .group-hover\:bg-cyan-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(165 243 252 / var(--tw-bg-opacity, 1));
@@ -5633,6 +5630,11 @@ input[type="range"]::-ms-fill-lower {
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
 
+.group:hover .group-hover\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .group:focus .group-focus\:outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -5891,16 +5893,6 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
 }
 
-.dark\:\!bg-primary-600:is(.dark *) {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)) !important;
-}
-
-.dark\:\!bg-primary-700:is(.dark *) {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)) !important;
-}
-
 .dark\:bg-amber-700:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
@@ -6544,11 +6536,6 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
-.dark\:hover\:\!bg-primary-700:hover:is(.dark *) {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)) !important;
-}
-
 .dark\:hover\:bg-blue-300:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(164 202 254 / var(--tw-bg-opacity, 1));
@@ -6579,6 +6566,10 @@ input[type="range"]::-ms-fill-lower {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:hover\:bg-gray-600\/10:hover:is(.dark *) {
+  background-color: rgb(75 85 99 / 0.1);
+}
+
 .dark\:hover\:bg-gray-700:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
@@ -7384,10 +7375,6 @@ input[type="range"]::-ms-fill-lower {
     padding: 0px;
   }
 
-  .md\:p-5 {
-    padding: 1.25rem;
-  }
-
   .md\:text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
@@ -7471,15 +7458,6 @@ input[type="range"]::-ms-fill-lower {
   }
 }
 
-.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
-  --tw-rotate: 180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 1;
-}
-
 .rtl\:after\:right-1:where([dir="rtl"], [dir="rtl"] *)::after {
   content: var(--tw-content);
   right: 0.25rem;

package/static/tailwind.css

@@ -54,3 +54,17 @@
 .form-group {
   padding-bottom: 1em;
 }
+
+/* For some reason, type=file was excluded */
+input[type="file"]:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty, );
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #1C64F2;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #1C64F2;
+}

package/ui/index.html

@@ -23,14 +23,14 @@
           </a>
         </div>
         <form class="flex m-0">
-          <a target="_blank" href="docs" id="btn-docs"
-            class="text-gray-800 dark:text-gray-200 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 mr-2 display-inline-block rounded-lg text-sm font-semibold px-2.5 py-3">
-            Docs
+          <a target="_blank" href="https://docs.norsk.video/studio/index.html" id="btn-docs"
+            class="whitespace-nowrap text-gray-800 dark:text-gray-200 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 mr-2 display-inline-block rounded-lg text-sm font-semibold px-2.5 py-3">
+            Studio Docs
           </a>
 
-          <a target="_blank" href="live/docs" id="btn-live-docs"
-            class="hidden whitespace-nowrap text-gray-800 dark:text-gray-200 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 mr-2 display-inline-block rounded-lg text-sm font-semibold px-2.5 py-3">
-            Live Docs
+          <a target="_blank" href="docs" id="btn-live-docs"
+            class="whitespace-nowrap text-gray-800 dark:text-gray-200 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 mr-2 display-inline-block rounded-lg text-sm font-semibold px-2.5 py-3">
+            API Docs
           </a>
 
           <button id="btn-start" type="button"
@@ -70,13 +70,23 @@
             class="bg-gray-50 border border-gray-300 text-gray-900 disabled:text-gray-500 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white disabled:dark:text-gray-400 dark:focus:ring-primary-500 dark:focus:border-primary-500">
           </select>
 
-          <button id="btn-save" type="button"
-            class="disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:text-gray-600 dark:disabled:text-gray-600 ml-2 text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
-            data-modal-target="modal-center" data-modal-toggle="modal-center">
+          <button id="btn-upload" type="button"
+            class="disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:text-gray-600 dark:disabled:text-gray-600 ml-2 text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round"
-                d="M9 13.5l3 3m0 0l3-3m-3 3v-6m1.06-4.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+                d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12-3-3m0 0-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
+            </svg>
+            <span class="sr-only">Upload</span>
+          </button>
+
+          <button id="btn-save" type="button"
+            class="disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:text-gray-600 dark:disabled:text-gray-600 ml-2 text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+              stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+              <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+              <polyline points="17 21 17 13 7 13 7 21" />
+              <polyline points="7 3 7 8 15 8" />
             </svg>
             <span class="sr-only">Save</span>
           </button>
@@ -93,7 +103,7 @@
         </div>
       </div>
     </div>
-    <div>
+    <div style="z-index: 41">
       <div id="drawer-console"
         class="h-20 w-full overflow-y-auto bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-800"
         tabindex="-1" aria-labelledby="drawer-console-label">
@@ -106,38 +116,7 @@
       </div>
     </div>
   </div>
-  <div id="modal-center" tabindex="-1" aria-hidden="true"
-    class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
-    <div class="relative p-4 w-full max-w-2xl max-h-full">
-      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-          <h3 id="modal-title" class="text-xl font-semibold text-gray-900 dark:text-white">
-          </h3>
-          <button id="modal-close" type="button"
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
-            data-modal-hide="modal-center">
-            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
-            </svg>
-            <span class="sr-only">Close modal</span>
-          </button>
-        </div>
-        <div class="p-4 md:p-5 space-y-4">
-          <div class="text-base leading-relaxed text-gray-500 dark:text-gray-400" id="modal-body">
-          </div>
-        </div>
-        <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
-          <button id="modal-ok" data-modal-hide="modal-center" type="button"
-            class="text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 disabled:bg-gray-700 disabled:dark:bg-gray-600 disabled:cursor-not-allowed focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800"></button>
-          <button id="modal-cancel" data-modal-hide="modal-center" type="button" class="ms-3 text-gray-modal-body500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg
-            border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700
-            dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600
-            dark:focus:ring-gray-600"></button>
-        </div>
-      </div>
-    </div>
-  </div>
+  <div id="modal-react-root"></div>
   <script type="module" src="bypass-esbuild.js"></script>
   <script src="static/flowbite.min.js" type="text/javascript"></script>
   <script type="module" src="static/webrtc.js"></script>