diff --git a/README.md b/README.md index 88cfae0..cd6419c 100644 --- a/README.md +++ b/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 diff --git a/assets/src/js/app/action.js b/assets/src/js/app/action.js index 46dee6e..bd5f6da 100644 --- a/assets/src/js/app/action.js +++ b/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}); diff --git a/assets/src/js/app/embed/index.js b/assets/src/js/app/embed/index.js index 5eff0ef..16b4b37 100644 --- a/assets/src/js/app/embed/index.js +++ b/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(); }); \ No newline at end of file diff --git a/assets/src/js/lib/progressLog.js b/assets/src/js/lib/progressLog.js index 01920ba..45619e6 100644 --- a/assets/src/js/lib/progressLog.js +++ b/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'); diff --git a/assets/src/styles/embed.css b/assets/src/styles/embed.css index 194941a..b3f271b 100644 --- a/assets/src/styles/embed.css +++ b/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; } } } -} +} \ No newline at end of file