fix embed

README.md

@@ -40,7 +40,7 @@ Some features to mention:
 - [x] Embed support
   - [x] Base version
   - [x] Extended version
-- [ ] 🚀Switch webtor.io to web-ui-v2
+- [x] 🚀Switch webtor.io to web-ui-v2
 
 
 ## Setting up connection to Webtor RestAPI

assets/src/js/app/action.js

@@ -6,9 +6,7 @@ av(async function() {
     const initProgressLog = (await import('../lib/progressLog')).initProgressLog;
     initProgressLog(progress, function(ev) {
         if (ev.level !== 'rendertemplate') return;
-        const obj = this;
         window.addEventListener('player_ready', function() {
-            obj.skip = true;
             progress.classList.add('hidden');
             el.classList.remove('hidden');
         }, {once: true});

assets/src/js/app/embed/index.js

@@ -1,4 +1,5 @@
 import message from './message';
+import initAsyncView from '../../lib/asyncView';
 
 function setHeight() {
     const width = document.body.offsetWidth;
@@ -38,4 +39,5 @@ window.addEventListener('load', async () => {
         document.body.style.backgroundImage = 'url(' + window._embedSettings.poster + ')';
         document.body.style.backgroundSize = 'cover';
     }
+    initAsyncView();
 });

assets/src/js/lib/progressLog.js

@@ -61,27 +61,8 @@ class SDK {
 }
 export function initProgressLog(el, func) {
     const r = new Renderer(el, func);
-    // function onMessageWithSkip(el, data, lt, func) {
-    //     const self = this;
-    //     if (['redirect'].includes(data.level) && self.skip === undefined) {
-    //         self.skip = true;
-    //         processMessage.call(self, el, data, lt, func);
-    //     } else {
-    //         if (self.skip === undefined) {
-    //             setTimeout(() => {
-    //                 if (self.skip === undefined) self.skip = false;
-    //                 if (self.skip !== true) {
-    //                     processMessage.call(self, el, data, lt, func);
-    //                 }
-    //             }, 100);
-    //         } else if (self.skip === false) {
-    //             processMessage.call(self, el, data, lt, func);
-    //         }
-    //     }
-    // }
     function onMessage(data) {
         r.renderMessage(data);
-        // onMessageWithSkip.call(this, el, data, lt, func);
     }
 
     const url = el.getAttribute('data-async-progress-log');

assets/src/styles/embed.css

@@ -2,35 +2,36 @@
 @tailwind components;
 @tailwind utilities;
 
-.loading-elipsis::after {
-  overflow: hidden;
-  display: inline-block;
-  vertical-align: bottom;
-  animation: ellipsis steps(4, end) 1500ms infinite;
-  content: "...";
-  width: 0;
-  margin-left: 0.15rem;
-}
-
-@keyframes ellipsis {
-  to {
-    width: 2.25em;
+@layer utilities {
+  .loading-elipsis::after {
+    overflow: hidden;
+    animation: ellipsis steps(4, end) 1500ms infinite;
+    content: "...";
+    width: 0;
+    display: inline-block;
+    vertical-align: bottom;
   }
-}
 
-.popin {
-  animation: popin 200ms;
-}
+  @keyframes ellipsis {
+    to {
+      width: 2.25em;
+    }
+  }
 
-@keyframes popin {
-  from {
-    transform: scaleX(0.95);
-    opacity: 0;
+  .popin {
+    animation: popin 200ms;
   }
 
-  to {
-    transform: scaleX(1);
-    opacity: 1;
+  @keyframes popin {
+    from {
+      transform: scaleX(0.95);
+      opacity: 0;
+    }
+
+    to {
+      transform: scaleX(1);
+      opacity: 1;
+    }
   }
 }
 
@@ -43,28 +44,67 @@
 
     pre {
       @apply px-5 leading-8 whitespace-pre-wrap flex;
+
       &::before {
         content: "> ";
+
         @apply shrink-0;
       }
-      &.in-progress {
-        @apply loading-elipsis;
-      }
-      &.error-summary {
+
+      &.error-summary, &.warn-summary {
         @apply px-5 bg-warning text-warning-content;
       }
-      &.done-summary {
+
+      &.done-summary, &.download-summary, &.redirect-summary {
         @apply px-5 bg-success text-success-content;
       }
+
+      &.inprogress, &.statusupdate {
+        span.loader {
+          @apply pl-1;
+          @apply loading-elipsis;
+        }
+      }
+
+      &.statusupdate {
+        span.status {
+          @apply pl-1;
+
+          &::before {
+            content: "(";
+          }
+
+          &::after {
+            content: ")";
+          }
+        }
+      }
+
+      &.done, &.error, &.warn {
+        span.status {
+          @apply pl-1;
+
+          &::before {
+            content: "...[";
+          }
+
+          &::after {
+            content: "]";
+          }
+        }
+      }
     }
+
     .close {
       @apply btn btn-sm btn-accent mr-4;
     }
+
     &-oneline {
       @apply flex;
+
       pre {
         @apply flex-grow;
       }
     }
   }
-}
+}