From 69f247903d289aeac6383ba3a6912504a6172873 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Wed, 2 Dec 2020 18:34:23 +0800 Subject: loader progress bar (superficial) - temp media changes --- deploy/index.html | 83 +++++++++--- deploy/loader.css | 141 --------------------- src/client/views/MainView.tsx | 12 +- src/client/views/PropertiesView.tsx | 4 +- src/client/views/nodes/PresBox.scss | 18 ++- src/client/views/nodes/PresBox.tsx | 245 +++++++++++++++++++----------------- 6 files changed, 226 insertions(+), 277 deletions(-) delete mode 100644 deploy/loader.css diff --git a/deploy/index.html b/deploy/index.html index beb7dd205..4e0c2dfa4 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -13,20 +13,51 @@ align-content: center; justify-content: center; background-color: #AEDDF8; + transition: 3s; z-index: 10; width: 100vw; height: 100vh; } .dash-loader-container { - width: 20vw; - height: 20vw; + display: grid; + grid-auto-rows: auto 30px auto; + } + + .dash-progress-bar { + width: 200px; + height: 5px; + align-self: center; + margin-top: 20px; + background-color: #ececec; + border-radius: 5px; + overflow: hidden; + } + + .dash-progress { + width: 0%; + height: 20px; + background-color: #5b9fdd; + transition: 0.1s; + } + + .dash-animation-container { + width: 10vw; + height: 10vw; display: flex; align-items: center; justify-content: center; border-radius: 100%; background-color: #5B9FDD; - align-self: center; + justify-self: center; + align-self: flex-end; + } + + .dash-loader-text { + font-size: 15px; + font-family: "Roboto"; + text-align: center; + color: #5B9FDD; } .dash-d-path { @@ -38,41 +69,63 @@ @keyframes dash-d-path { 0% { stroke-dashoffset: 1000; - /* stroke-width: 0px; */ } 20% { stroke-dashoffset: 0; - /* stroke-width: 20px; */ } 70% { stroke-dashoffset: 0; - /* stroke-width: 20px; */ } 90% { stroke-dashoffset: 1000; - /* stroke-width: 0px; */ } 100% { stroke-dashoffset: 1000; - /* stroke-width: 0px; */ } } -
+
- - - +
+ + + +
+
+
+
+ +
+
+ Loading Dash... +
diff --git a/deploy/loader.css b/deploy/loader.css deleted file mode 100644 index 065862013..000000000 --- a/deploy/loader.css +++ /dev/null @@ -1,141 +0,0 @@ -.dash-loader { - display: flex; - align-content: center; - justify-content: center; - background-color: lightcyan; - z-index: 10; - width: 100%; - height: 100%; -} - -.dash-loader-container { - width: 100; - align-self: center; -} - -.dash-d-path { - stroke-dasharray: 1000; - stroke-dashoffset: 1000; - animation: dash-d-path 10s linear infinite; -} - -@keyframes dash-d-path { - 0% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } - - 10% { - stroke-dashoffset: 0; - /* stroke-width: 20px; */ - } - - 90% { - stroke-dashoffset: 0; - /* stroke-width: 20px; */ - } - - 100% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } -} - -.dash-a-path { - stroke-dasharray: 1000; - stroke-dashoffset: 1000; - animation: dash-a-path 10s linear infinite; -} - -@keyframes dash-a-path { - 0% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } - - 7% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } - - 17% { - stroke-dashoffset: 0; - /* stroke-width: 20px; */ - } - - 90% { - stroke-dashoffset: 0; - /* stroke-width: 20px; */ - } - - 100% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } -} - -.dash-s-path { - stroke-dasharray: 1000; - stroke-dashoffset: 1000; - animation: dash-s-path 10s linear infinite; -} - -@keyframes dash-s-path { - 0% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } - - 14% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } - - 20% { - stroke-dashoffset: 0; - /* stroke-width: 20px; */ - } - - 90% { - stroke-dashoffset: 0; - /* stroke-width: 20px; */ - } - - 100% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } -} - -.dash-h-path { - stroke-dasharray: 1000; - stroke-dashoffset: 1000; - animation: dash-h-path 10s linear infinite; -} - -@keyframes dash-h-path { - 0% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } - - 18% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } - - 28% { - stroke-dashoffset: 0; - /* stroke-width: 20px; */ - } - - 90% { - stroke-dashoffset: 0; - /* stroke-width: 20px; */ - } - - 100% { - stroke-dashoffset: 1000; - /* stroke-width: 0px; */ - } -} \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 12e361dc1..747bde64d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -87,11 +87,15 @@ export class MainView extends React.Component { componentDidMount() { document.getElementById("root")?.addEventListener("scroll", e => ((ele) => ele.scrollLeft = ele.scrollTop = 0)(document.getElementById("root")!)); const ele = document.getElementById("loader"); - - if (ele) { + const prog = document.getElementById("dash-progress"); + if (ele && prog) { // remove from DOM - setTimeout(() => { ele.style.opacity = "0"; }, 0); - setTimeout(() => ele.outerHTML = '', 10000); + setTimeout(() => { + clearTimeout(); + prog.style.transition = "1s"; + prog.style.width = "100%"; + }, 0); + setTimeout(() => ele.outerHTML = '', 1000); } new InkStrokeProperties(); this._sidebarContent.proto = undefined; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index a9076fea7..3c77bc309 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1016,7 +1016,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.transitionDropdown}
: null} } - {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :
+ {/* {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :
this.openPresProgressivize = !this.openPresProgressivize)} style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}> @@ -1028,7 +1028,7 @@ export class PropertiesView extends React.Component { {this.openPresProgressivize ?
{PresBox.Instance.progressivizeDropdown}
: null} -
} +
} */} {!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? (null) :
{ this.openSlideOptions = !this.openSlideOptions; })} diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index ba21cef42..1ba86232b 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -129,7 +129,9 @@ $dark-grey: #656565; } .presBox-radioButtons { - background-color: rgba(0, 0, 0, 0.1); + font-size: 10px; + font-weight: 200; + // background-color: rgba(0, 0, 0, 0.1); .checkbox-container { margin-left: 10px; @@ -345,6 +347,20 @@ $dark-grey: #656565; font-weight: 100; margin-top: 3px; font-size: 10px; + + .slider-block { + width: 63px; + border-radius: 5px; + text-align: center; + margin-bottom: 8px; + margin-top: 8px; + } + + .slider-number { + border-radius: 3px; + width: 30px; + margin: auto; + } } .slider-value { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index d21e1603d..a4f79571e 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -640,10 +640,14 @@ export class PresBox extends ViewBoxBaseComponent if (this.childDocs[stopDocIndex - 1].mediaStopTriggerList) { const list = DocListCast(this.childDocs[stopDocIndex - 1].mediaStopTriggerList); list.push(activeItem); + // this.childDocs[stopDocIndex - 1].mediaStopTriggerList = list; + console.log(list); } else { this.childDocs[stopDocIndex - 1].mediaStopTriggerList = new List(); const list = DocListCast(this.childDocs[stopDocIndex - 1].mediaStopTriggerList); list.push(activeItem); + // this.childDocs[stopDocIndex - 1].mediaStopTriggerList = list; + console.log(list); } }); @@ -1424,102 +1428,138 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
Range:
-
-
- Start time: -
-
- Duration: -
-
- End time: -
-
-
-
- ) => { activeItem.presStartTime = Number(e.target.value); })} - /> s +
+ Start {"&"} End Time +
+
+
+ Start time (s) +
+
+ ) => { activeItem.presStartTime = Number(e.target.value); })} + /> +
+
+
+
+ Duration (s) +
+
+ {Math.round((NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime)) * 10) / 10} +
+
+
+
+ End time (s) +
+
+ ) => { activeItem.presEndTime = Number(e.target.value); })} + /> +
-
- {Math.round((NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime)) * 10) / 10} s
-
- ) => { activeItem.presEndTime = Number(e.target.value); })} - /> s +
+ { + this._batch = UndoManager.StartBatch("presEndTime"); + const endBlock = document.getElementById("endTime"); + if (endBlock) { + endBlock.style.color = PresColor.LightBackground; + endBlock.style.backgroundColor = PresColor.DarkBlue; + } + }} + onPointerUp={() => { + this._batch?.end(); + const endBlock = document.getElementById("endTime"); + if (endBlock) { + endBlock.style.color = "black"; + endBlock.style.backgroundColor = PresColor.LightBackground; + } + }} + onChange={(e: React.ChangeEvent) => { + e.stopPropagation(); + activeItem.presEndTime = Number(e.target.value); + }} /> + { + this._batch = UndoManager.StartBatch("presStartTime"); + const startBlock = document.getElementById("startTime"); + if (startBlock) { + startBlock.style.color = PresColor.LightBackground; + startBlock.style.backgroundColor = PresColor.DarkBlue; + } + }} + onPointerUp={() => { + this._batch?.end(); + const startBlock = document.getElementById("startTime"); + if (startBlock) { + startBlock.style.color = "black"; + startBlock.style.backgroundColor = PresColor.LightBackground; + } + }} + onChange={(e: React.ChangeEvent) => { + e.stopPropagation(); + activeItem.presStartTime = Number(e.target.value); + }} />
-
-
- this._batch = UndoManager.StartBatch("presEndTime")} - onPointerUp={() => this._batch?.end()} - onChange={(e: React.ChangeEvent) => { - e.stopPropagation(); - activeItem.presEndTime = Number(e.target.value); - }} /> - this._batch = UndoManager.StartBatch("presEndTime")} - onPointerUp={() => this._batch?.end()} - onChange={(e: React.ChangeEvent) => { - e.stopPropagation(); - activeItem.presStartTime = Number(e.target.value); - }} /> -
-
-
0 s
-
-
{activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} s
-
-
Start playing:
-
-
- activeItem.mediaStart = "manual"} - checked={activeItem.mediaStart === "manual"} - /> -
On click
-
-
- activeItem.mediaStart = "auto"} - checked={activeItem.mediaStart === "auto"} - /> -
Automatically
+
+
0 s
+
+
{activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} s
-
Stop playing:
-
-
- activeItem.mediaStop = "manual"} - checked={activeItem.mediaStop === "manual"} - /> -
At audio end time
-
-
- activeItem.mediaStop = "auto"} - checked={activeItem.mediaStop === "auto"} - /> -
On slide change
+
+ Playback +
Start playing:
+
+
+ activeItem.mediaStart = "manual"} + checked={activeItem.mediaStart === "manual"} + /> +
On click
+
+
+ activeItem.mediaStart = "auto"} + checked={activeItem.mediaStart === "auto"} + /> +
Automatically
+
-
+
Stop playing:
+
+
+ activeItem.mediaStop = "manual"} + checked={activeItem.mediaStop === "manual"} + /> +
At audio end time
+
+
+ activeItem.mediaStop = "auto"} + checked={activeItem.mediaStop === "auto"} + /> +
On slide change
+
+ {/*
activeItem.mediaStop = "afterSlide"} @@ -1535,33 +1575,10 @@ export class PresBox extends ViewBoxBaseComponent {this.mediaStopSlides}
+
*/}
- {/*
-
-
activeItem.playAuto = !activeItem.playAuto}>Play automatically
-
activeItem.playAuto = !activeItem.playAuto}>Play on next
-
- {targetDoc.type === DocumentType.AUDIO ?
-
Start time
-
- ) => { activeItem.presStartTime = Number(e.target.value); })} /> -
-
: (null)} - {targetDoc.type === DocumentType.AUDIO ?
-
End time
-
- ) => { const val = e.target.value; activeItem.presEndTime = Number(val); })} /> -
-
: (null)} -
*/}
); -- cgit v1.2.3-70-g09d2