aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--deploy/index.html83
-rw-r--r--deploy/loader.css141
-rw-r--r--src/client/views/MainView.tsx12
-rw-r--r--src/client/views/PropertiesView.tsx4
-rw-r--r--src/client/views/nodes/PresBox.scss18
-rw-r--r--src/client/views/nodes/PresBox.tsx245
6 files changed, 226 insertions, 277 deletions
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; */
}
}
</style>
</head>
<body style="display:flex" id="dash-body">
- <div class="dash-loader" id="loader" style="z-index:10; width:100%; height:100%">
+ <div class="dash-loader" id="loader" style="z-index:10; width:100%; height:100%;">
<div class="dash-loader-container">
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px"
- height="200px" viewBox="0 0 250 350">
- <path class="dash-d-path" fill-rule="evenodd" stroke="#ececec" stroke-width="20px" stroke-linecap="butt"
- stroke-linejoin="miter" fill="none"
- d="M196.500,18.500 C195.888,79.462 194.655,160.273 197.500,195.500 C198.117,203.144 199.664,225.773 189.500,246.500 C183.949,257.819 175.192,268.535 163.500,277.500 C147.404,289.842 133.006,294.212 121.500,295.500 C106.618,297.166 92.057,294.673 79.500,288.500 C68.970,283.324 58.384,274.780 49.500,261.500 C39.958,247.237 35.188,230.375 35.500,213.500 C35.760,199.463 39.572,185.692 46.500,173.500 C55.433,157.780 65.945,148.829 75.500,143.500 C85.352,138.005 98.187,134.141 114.500,134.500 C128.982,134.819 143.177,139.076 155.500,146.500 C186.160,164.973 196.208,196.242 197.500,216.500 C197.663,219.061 197.578,222.985 197.500,226.500 C197.092,244.967 195.719,262.030 195.500,280.500 C195.460,283.898 195.500,293.783 195.500,300.500 C195.500,304.834 195.500,309.189 195.500,313.500 " />
- </svg>
+ <div class="dash-animation-container">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px"
+ height="100px" viewBox="0 0 250 350">
+ <path class="dash-d-path" fill-rule="evenodd" stroke="#ececec" stroke-width="30px"
+ stroke-linecap="butt" stroke-linejoin="miter" fill="none"
+ d="M196.500,18.500 C195.888,79.462 194.655,160.273 197.500,195.500 C198.117,203.144 199.664,225.773 189.500,246.500 C183.949,257.819 175.192,268.535 163.500,277.500 C147.404,289.842 133.006,294.212 121.500,295.500 C106.618,297.166 92.057,294.673 79.500,288.500 C68.970,283.324 58.384,274.780 49.500,261.500 C39.958,247.237 35.188,230.375 35.500,213.500 C35.760,199.463 39.572,185.692 46.500,173.500 C55.433,157.780 65.945,148.829 75.500,143.500 C85.352,138.005 98.187,134.141 114.500,134.500 C128.982,134.819 143.177,139.076 155.500,146.500 C186.160,164.973 196.208,196.242 197.500,216.500 C197.663,219.061 197.578,222.985 197.500,226.500 C197.092,244.967 195.719,262.030 195.500,280.500 C195.460,283.898 195.500,293.783 195.500,300.500 C195.500,304.834 195.500,309.189 195.500,313.500 " />
+ </svg>
+ </div>
+ <div class="dash-progress-bar">
+ <div id="dash-progress" class="dash-progress">
+ </div>
+ <script>
+ setTimeout(() => {
+ document.getElementById("dash-progress").style.width = "10%"
+ document.getElementById("dash-loader-text").innerHTML = "Loading Dash..."
+ }, 500);
+ setTimeout(() => {
+ document.getElementById("dash-progress").style.width = "30%"
+ document.getElementById("dash-loader-text").innerHTML = "Preparing dashboards..."
+ }, 1000);
+ setTimeout(() => {
+ document.getElementById("dash-progress").style.width = "50%"
+ document.getElementById("dash-loader-text").innerHTML = "Fetching documents..."
+ }, 1500);
+ setTimeout(() => {
+ document.getElementById("dash-progress").style.width = "70%"
+ document.getElementById("dash-loader-text").innerHTML = "Finalising setup..."
+ }, 3000);
+ </script>
+ </div>
+ <div id="dash-loader-text" class="dash-loader-text">
+ Loading Dash...
+ </div>
</div>
</div>
<!-- <script src="https://hypothes.is/embed.js" async></script> -->
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<PropertiesViewProps> {
{PresBox.Instance.transitionDropdown}
</div> : null}
</div>}
- {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) : <div className="propertiesView-presTrails">
+ {/* {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) : <div className="propertiesView-presTrails">
<div className="propertiesView-presTrails-title"
onPointerDown={action(() => this.openPresProgressivize = !this.openPresProgressivize)}
style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}>
@@ -1028,7 +1028,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{this.openPresProgressivize ? <div className="propertiesView-presTrails-content">
{PresBox.Instance.progressivizeDropdown}
</div> : null}
- </div>}
+ </div>} */}
{!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? (null) : <div className="propertiesView-presTrails">
<div className="propertiesView-presTrails-title"
onPointerDown={action(() => { 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<FieldViewProps, PresBoxSchema>
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<Doc>();
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<FieldViewProps, PresBoxSchema>
<div>
<div className={'presBox-ribbon'} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
<div>
- <div className="presBox-subheading">Range:</div>
- <div className={"slider-headers"}>
- <div className="slider-text">
- Start time:
- </div>
- <div className="slider-text">
- Duration:
- </div>
- <div className="slider-text">
- End time:
- </div>
- </div>
- <div className={"slider-headers"} style={{ marginTop: 0 }}>
- <div className="slider-text">
- <input className="presBox-input"
- style={{ textAlign: 'left', width: 30, height: 15, fontSize: 10 }}
- type="number" value={NumCast(activeItem.presStartTime)}
- onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { activeItem.presStartTime = Number(e.target.value); })}
- /> s
+ <div className="ribbon-box">
+ Start {"&"} End Time
+ <div className={"slider-headers"}>
+ <div className="slider-block" >
+ <div className="slider-text" style={{ fontWeight: 500 }}>
+ Start time (s)
+ </div>
+ <div id={"startTime"} className="slider-number" style={{ backgroundColor: PresColor.LightBackground }}>
+ <input className="presBox-input"
+ style={{ textAlign: 'center', width: 30, height: 15, fontSize: 10 }}
+ type="number" value={NumCast(activeItem.presStartTime)}
+ onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { activeItem.presStartTime = Number(e.target.value); })}
+ />
+ </div>
+ </div>
+ <div className="slider-block">
+ <div className="slider-text" style={{ fontWeight: 500 }}>
+ Duration (s)
+ </div>
+ <div className="slider-number" style={{ backgroundColor: PresColor.LightBlue }}>
+ {Math.round((NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime)) * 10) / 10}
+ </div>
+ </div>
+ <div className="slider-block">
+ <div className="slider-text" style={{ fontWeight: 500 }}>
+ End time (s)
+ </div>
+ <div id={"endTime"} className="slider-number" style={{ backgroundColor: PresColor.LightBackground }}>
+ <input className="presBox-input"
+ style={{ textAlign: 'center', width: 30, height: 15, fontSize: 10 }}
+ type="number" value={NumCast(activeItem.presEndTime)}
+ onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { activeItem.presEndTime = Number(e.target.value); })}
+ />
+ </div>
</div>
- <div className="slider-text">
- {Math.round((NumCast(activeItem.presEndTime) - NumCast(activeItem.presStartTime)) * 10) / 10} s
</div>
- <div className="slider-text">
- <input className="presBox-input"
- style={{ textAlign: 'right', width: 30, height: 15, fontSize: 10 }}
- type="number" value={NumCast(activeItem.presEndTime)}
- onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { activeItem.presEndTime = Number(e.target.value); })}
- /> s
+ <div className="multiThumb-slider">
+ <input type="range" step="0.1" min="0" max={activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} value={NumCast(activeItem.presEndTime)}
+ style={{ gridColumn: 1, gridRow: 1 }}
+ className={`toolbar-slider ${"end"}`}
+ id="toolbar-slider"
+ onPointerDown={() => {
+ 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<HTMLInputElement>) => {
+ e.stopPropagation();
+ activeItem.presEndTime = Number(e.target.value);
+ }} />
+ <input type="range" step="0.1" min="0" max={activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} value={NumCast(activeItem.presStartTime)}
+ style={{ gridColumn: 1, gridRow: 1 }}
+ className={`toolbar-slider ${"start"}`}
+ id="toolbar-slider"
+ onPointerDown={() => {
+ 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<HTMLInputElement>) => {
+ e.stopPropagation();
+ activeItem.presStartTime = Number(e.target.value);
+ }} />
</div>
- </div>
- <div className="multiThumb-slider">
- <input type="range" step="0.1" min="0" max={activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} value={NumCast(activeItem.presEndTime)}
- style={{ gridColumn: 1, gridRow: 1 }}
- className={`toolbar-slider ${"end"}`}
- id="toolbar-slider"
- onPointerDown={() => this._batch = UndoManager.StartBatch("presEndTime")}
- onPointerUp={() => this._batch?.end()}
- onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
- e.stopPropagation();
- activeItem.presEndTime = Number(e.target.value);
- }} />
- <input type="range" step="0.1" min="0" max={activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} value={NumCast(activeItem.presStartTime)}
- style={{ gridColumn: 1, gridRow: 1 }}
- className={`toolbar-slider ${"start"}`}
- id="toolbar-slider"
- onPointerDown={() => this._batch = UndoManager.StartBatch("presEndTime")}
- onPointerUp={() => this._batch?.end()}
- onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
- e.stopPropagation();
- activeItem.presStartTime = Number(e.target.value);
- }} />
- </div>
- <div className={`slider-headers ${activeItem.presMovement === PresMovement.Pan || activeItem.presMovement === PresMovement.Zoom ? "" : "none"}`}>
- <div className="slider-text">0 s</div>
- <div className="slider-text"></div>
- <div className="slider-text">{activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} s</div>
- </div>
- <div className="presBox-subheading">Start playing:</div>
- <div className="presBox-radioButtons">
- <div className="checkbox-container">
- <input className="presBox-checkbox"
- type="checkbox"
- onChange={() => activeItem.mediaStart = "manual"}
- checked={activeItem.mediaStart === "manual"}
- />
- <div>On click</div>
- </div>
- <div className="checkbox-container">
- <input className="presBox-checkbox"
- type="checkbox"
- onChange={() => activeItem.mediaStart = "auto"}
- checked={activeItem.mediaStart === "auto"}
- />
- <div>Automatically</div>
+ <div className={`slider-headers ${activeItem.presMovement === PresMovement.Pan || activeItem.presMovement === PresMovement.Zoom ? "" : "none"}`}>
+ <div className="slider-text">0 s</div>
+ <div className="slider-text"></div>
+ <div className="slider-text">{activeItem.type === DocumentType.AUDIO ? Math.round(NumCast(activeItem.duration) * 10) / 10 : Math.round(NumCast(activeItem["data-duration"]) * 10) / 10} s</div>
</div>
</div>
- <div className="presBox-subheading">Stop playing:</div>
- <div className="presBox-radioButtons">
- <div className="checkbox-container">
- <input className="presBox-checkbox"
- type="checkbox"
- onChange={() => activeItem.mediaStop = "manual"}
- checked={activeItem.mediaStop === "manual"}
- />
- <div>At audio end time</div>
- </div>
- <div className="checkbox-container">
- <input className="presBox-checkbox"
- type="checkbox"
- onChange={() => activeItem.mediaStop = "auto"}
- checked={activeItem.mediaStop === "auto"}
- />
- <div>On slide change</div>
+ <div className="ribbon-final-box">
+ Playback
+ <div className="presBox-subheading">Start playing:</div>
+ <div className="presBox-radioButtons">
+ <div className="checkbox-container">
+ <input className="presBox-checkbox"
+ type="checkbox"
+ onChange={() => activeItem.mediaStart = "manual"}
+ checked={activeItem.mediaStart === "manual"}
+ />
+ <div>On click</div>
+ </div>
+ <div className="checkbox-container">
+ <input className="presBox-checkbox"
+ type="checkbox"
+ onChange={() => activeItem.mediaStart = "auto"}
+ checked={activeItem.mediaStart === "auto"}
+ />
+ <div>Automatically</div>
+ </div>
</div>
- <div className="checkbox-container">
+ <div className="presBox-subheading">Stop playing:</div>
+ <div className="presBox-radioButtons">
+ <div className="checkbox-container">
+ <input className="presBox-checkbox"
+ type="checkbox"
+ onChange={() => activeItem.mediaStop = "manual"}
+ checked={activeItem.mediaStop === "manual"}
+ />
+ <div>At audio end time</div>
+ </div>
+ <div className="checkbox-container">
+ <input className="presBox-checkbox"
+ type="checkbox"
+ onChange={() => activeItem.mediaStop = "auto"}
+ checked={activeItem.mediaStop === "auto"}
+ />
+ <div>On slide change</div>
+ </div>
+ {/* <div className="checkbox-container">
<input className="presBox-checkbox"
type="checkbox"
onChange={() => activeItem.mediaStop = "afterSlide"}
@@ -1535,33 +1575,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
{this.mediaStopSlides}
</select>
</div>
+ </div> */}
</div>
</div>
</div>
- {/* <div className="ribbon-box">
- <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.AUDIO ? "inline-flex" : "none" }}>
- <div className="ribbon-toggle" style={{ backgroundColor: activeItem.playAuto ? PresColor.LightBlue : "" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play automatically</div>
- <div className="ribbon-toggle" style={{ display: "flex", backgroundColor: activeItem.playAuto ? "" : PresColor.LightBlue }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play on next</div>
- </div>
- {targetDoc.type === DocumentType.AUDIO ? <div className="ribbon-doubleButton" style={{ marginRight: 10 }}>
- <div className="presBox-subheading">Start time</div>
- <div className="ribbon-property" style={{ paddingRight: 0, paddingLeft: 0 }}>
- <input className="presBox-input"
- style={{ textAlign: 'left', width: 50 }}
- type="number" value={NumCast(activeItem.presStartTime)}
- onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { activeItem.presStartTime = Number(e.target.value); })} />
- </div>
- </div> : (null)}
- {targetDoc.type === DocumentType.AUDIO ? <div className="ribbon-doubleButton" style={{ marginRight: 10 }}>
- <div className="presBox-subheading">End time</div>
- <div className="ribbon-property" style={{ paddingRight: 0, paddingLeft: 0 }}>
- <input className="presBox-input"
- style={{ textAlign: 'left', width: 50 }}
- type="number" value={NumCast(activeItem.presEndTime)}
- onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { const val = e.target.value; activeItem.presEndTime = Number(val); })} />
- </div>
- </div> : (null)}
- </div> */}
</div>
</div >
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 06:18:12 +0000