aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-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
4 files changed, 158 insertions, 121 deletions
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-08 12:03:42 +0000