ui framework for effect animations

1 files changed, 135 insertions, 106 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 5ce010cf7..9644935b2 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -49,6 +49,7 @@ import Slider from '@mui/material/Slider';
 import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaCompressArrowsAlt } from 'react-icons/fa';
 import SpringAnimationPreview from './SlideEffectPreview';
 import { effectTimings, SpringType, springMappings, effectItems, easeItems, movementItems, SpringSettings, presEffectDefaultTimings } from './SpringUtils';
+import SlideEffect from './SlideEffect';
 
 export interface pinDataTypes {
     scrollable?: boolean;
@@ -1322,7 +1323,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.updateCurrentPresentation(DocCast(doc.embedContainer));
     };
 
-    //Command click
+    // Command click
     @action
     multiSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement) => {
         if (!this.selectedArray.has(doc)) {
@@ -1666,6 +1667,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         PresBox._sliderBatch.end();
         document.removeEventListener('pointerup', PresBox.endBatch, true);
     };
+
     public static inputter = (min: string, step: string, max: string, value: number, active: boolean, change: (val: string) => void, hmargin?: number) => {
         return (
             <div
@@ -1711,6 +1713,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
     };
 
+    // Applies the slide transiiton settings to all docs in the array
     @undoBatch
     applyTo = (array: Doc[]) => {
         this.updateMovement(this.activeItem.presentation_movement as PresMovement, true);
@@ -2145,16 +2148,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 onClick={() => (activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio))}
                                 color={SettingsManager.userColor}
                             />
-                            {/* <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
-                                <div className="presBox-subheading">Play Audio Annotation</div>
-                                <input
-                                    className="presBox-checkbox"
-                                    style={{ margin: 10, border: `solid 1px ${SettingsManager.userColor}` }}
-                                    type="checkbox"
-                                    onChange={() => (activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio))}
-                                    checked={BoolCast(activeItem.presPlayAudio)}
-                                />
-                            </div> */}
                             <Toggle
                                 formLabel={'Zoom Text Selections'}
                                 toggleType={ToggleType.SWITCH}
@@ -2162,16 +2155,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 onClick={() => (activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText))}
                                 color={SettingsManager.userColor}
                             />
-                            {/* <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
-                                <div className="presBox-subheading">Zoom Text Selections</div>
-                                <input
-                                    className="presBox-checkbox"
-                                    style={{ margin: 10, border: `solid 1px ${SettingsManager.userColor}` }}
-                                    type="checkbox"
-                                    onChange={() => (activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText))}
-                                    checked={BoolCast(activeItem.presentation_zoomText)}
-                                />
-                            </div> */}
                             {/* Effect dropdown */}
                             <Dropdown
                                 color={StrCast(Doc.UserDoc().userColor)}
@@ -2187,100 +2170,136 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 dropdownType={DropdownType.SELECT}
                                 type={Type.TERT}
                             />
-                            {/* <div
-                                className="presBox-dropdown"
-                                onClick={action(e => {
-                                    e.stopPropagation();
-                                    this._openEffectDropdown = !this._openEffectDropdown;
-                                })}
-                                style={{
-                                    color: SettingsManager.userColor,
-                                    background: SettingsManager.userVariantColor,
-                                    borderBottomLeftRadius: this._openEffectDropdown ? 0 : 5,
-                                    border: this._openEffectDropdown ? `solid 2px ${SettingsManager.userVariantColor}` : `solid 1px ${SettingsManager.userColor}`,
-                                }}>
-                                {effect?.toString()}
-                                <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
-                                <div
-                                    className="presBox-dropdownOptions"
-                                    id={'presBoxMovementDropdown'}
-                                    style={{
-                                        color: SettingsManager.userColor,
-                                        background: SettingsManager.userBackgroundColor,
-                                        display: this._openEffectDropdown ? 'grid' : 'none',
-                                    }}
-                                    onPointerDown={e => e.stopPropagation()}>
-                                    {Object.values(PresEffect)
-                                        .filter(v => isNaN(Number(v)))
-                                        .map(effect => preseEffect(effect))}
+                            {/* Effect generations */}
+                            <div className="presBox-option-block presBox-option-center">
+                                {/* Chat for idea generation */}
+                                <div className="presBox-gpt-chat">
+                                    <p>Customize with GPT</p>
+                                    <div className="pres-chat">
+                                        <div className="pres-chatbox-container">
+                                            <ReactTextareaAutosize
+                                                ref={r => (this._inputref = r)}
+                                                minRows={1}
+                                                placeholder="Customize..."
+                                                className="pres-chatbox"
+                                                autoFocus={true}
+                                                value={this.chatInput}
+                                                onChange={e => {
+                                                    this.setChatInput(e.target.value);
+                                                }}
+                                                onKeyDown={e => {
+                                                    this.stopDictation(true);
+                                                    e.stopPropagation();
+                                                }}
+                                            />
+                                            <IconButton
+                                                type={Type.TERT}
+                                                color={this.isRecording ? '#2bcaff' : StrCast(Doc.UserDoc().userVariantColor)}
+                                                tooltip="Record"
+                                                icon={<BiMicrophone size={'16px'} />}
+                                                onClick={() => {
+                                                    if (!this.isRecording) {
+                                                        this.recordDictation();
+                                                    } else {
+                                                        this.stopDictation(true);
+                                                    }
+                                                }}
+                                            />
+                                        </div>
+                                        <Button
+                                            style={{ alignSelf: 'flex-end' }}
+                                            text="Send"
+                                            type={Type.TERT}
+                                            icon={this.isLoading ? <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} /> : <AiOutlineSend />}
+                                            iconPlacement="right"
+                                            color={StrCast(Doc.UserDoc().userVariantColor)}
+                                            onClick={() => {
+                                                this.customizeWithGPT(this.chatInput);
+                                            }}
+                                        />
+                                    </div>
                                 </div>
-                            </div> */}
+                                {/* Preview Animations  */}
+                                <div className="presBox-effect-row">
+                                    <div className="presBox-effect-container">
+                                        <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={PresEffect.Bounce} tension={100} friction={15} mass={1} infinite>
+                                            <div className="presBox-effect-demo-box"></div>
+                                        </SlideEffect>
+                                    </div>
+                                    <div className="presBox-effect-container">
+                                        <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={PresEffect.Fade} tension={100} friction={15} mass={1} infinite>
+                                            <div className="presBox-effect-demo-box" style={{ backgroundColor: '#4925ff' }}></div>
+                                        </SlideEffect>
+                                    </div>
+                                </div>
+                                <div className="presBox-effect-row">
+                                    <div className="presBox-effect-container">
+                                        <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={PresEffect.Flip} tension={100} friction={15} mass={1} infinite>
+                                            <div className="presBox-effect-demo-box" style={{ top: 0, left: 0, backgroundColor: '#a825ff' }}></div>
+                                        </SlideEffect>
+                                    </div>
+                                    <div className="presBox-effect-container">
+                                        <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={PresEffect.Roll} tension={100} friction={15} mass={1} infinite>
+                                            <div className="presBox-effect-demo-box" style={{ backgroundColor: '#ff2599' }}></div>
+                                        </SlideEffect>
+                                    </div>
+                                </div>
+                            </div>
                             {/* Effect direction */}
                             {/* Only applies to certain effects */}
-                            {effect === PresEffect.Flip ||
-                                effect === PresEffect.Bounce ||
-                                (effect === PresEffect.Roll && (
-                                    <>
-                                        <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
-                                            <div className="presBox-subheading">Effect direction</div>
-                                            <div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
-                                                {StrCast(this.activeItem.presentation_effectDirection)}
-                                            </div>
+                            {(effect === PresEffect.Flip || effect === PresEffect.Bounce || effect === PresEffect.Roll) && (
+                                <>
+                                    <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
+                                        <div className="presBox-subheading">Effect direction</div>
+                                        <div className="ribbon-property" style={{ border: `solid 1px ${SettingsManager.userColor}` }}>
+                                            {StrCast(this.activeItem.presentation_effectDirection)}
                                         </div>
-                                        <div className="presBox-icon-list">
-                                            <IconButton
+                                    </div>
+                                    <div className="presBox-icon-list">
+                                        {/* <IconButton
                                                 type={Type.TERT}
                                                 color={activeItem.presentation_effectDirection === PresEffectDirection.Center ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
                                                 tooltip="Center"
                                                 icon={<FaCompressArrowsAlt size={'16px'} />}
                                                 onClick={() => this.updateEffectDirection(PresEffectDirection.Center)}
-                                            />
-                                            <IconButton
-                                                type={Type.TERT}
-                                                color={activeItem.presentation_effectDirection === PresEffectDirection.Left ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                                tooltip="Left"
-                                                icon={<FaArrowRight size={'16px'} />}
-                                                onClick={() => this.updateEffectDirection(PresEffectDirection.Left)}
-                                            />
-                                            <IconButton
-                                                type={Type.TERT}
-                                                color={activeItem.presentation_effectDirection === PresEffectDirection.Right ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                                tooltip="Right"
-                                                icon={<FaArrowLeft size={'16px'} />}
-                                                onClick={() => this.updateEffectDirection(PresEffectDirection.Right)}
-                                            />
-                                            {effect !== PresEffect.Roll && (
-                                                <>
-                                                    <IconButton
-                                                        type={Type.TERT}
-                                                        color={activeItem.presentation_effectDirection === PresEffectDirection.Top ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                                        tooltip="Top"
-                                                        icon={<FaArrowDown size={'16px'} />}
-                                                        onClick={() => this.updateEffectDirection(PresEffectDirection.Top)}
-                                                    />
-                                                    <IconButton
-                                                        type={Type.TERT}
-                                                        color={activeItem.presentation_effectDirection === PresEffectDirection.Bottom ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
-                                                        tooltip="Bottom"
-                                                        icon={<FaArrowUp size={'16px'} />}
-                                                        onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
-                                                    />
-                                                </>
-                                            )}
-                                        </div>
-                                    </>
-                                ))}
+                                            /> */}
+                                        <IconButton
+                                            type={Type.TERT}
+                                            color={activeItem.presentation_effectDirection === PresEffectDirection.Left ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                            tooltip="Left"
+                                            icon={<FaArrowRight size={'16px'} />}
+                                            onClick={() => this.updateEffectDirection(PresEffectDirection.Left)}
+                                        />
+                                        <IconButton
+                                            type={Type.TERT}
+                                            color={activeItem.presentation_effectDirection === PresEffectDirection.Right ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                            tooltip="Right"
+                                            icon={<FaArrowLeft size={'16px'} />}
+                                            onClick={() => this.updateEffectDirection(PresEffectDirection.Right)}
+                                        />
+                                        {effect !== PresEffect.Roll && (
+                                            <>
+                                                <IconButton
+                                                    type={Type.TERT}
+                                                    color={activeItem.presentation_effectDirection === PresEffectDirection.Top ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                                    tooltip="Top"
+                                                    icon={<FaArrowDown size={'16px'} />}
+                                                    onClick={() => this.updateEffectDirection(PresEffectDirection.Top)}
+                                                />
+                                                <IconButton
+                                                    type={Type.TERT}
+                                                    color={activeItem.presentation_effectDirection === PresEffectDirection.Bottom ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                                                    tooltip="Bottom"
+                                                    icon={<FaArrowUp size={'16px'} />}
+                                                    onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
+                                                />
+                                            </>
+                                        )}
+                                    </div>
+                                </>
+                            )}
                             {/* Spring settings */}
                             {/* No spring settings for jackinthebox (lightspeed) */}
-                            <div
-                                className="presBox-show-hide-dropdown"
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    this.setSpringEditorVisibility(!this.showSpringEditor);
-                                }}>
-                                {`${this.showSpringEditor ? 'Hide' : 'Show'} Spring Settings`}
-                                <FontAwesomeIcon icon={this.showSpringEditor ? 'chevron-up' : 'chevron-down'} />
-                            </div>
                             {effect !== PresEffect.Lightspeed && (
                                 <>
                                     <Dropdown
@@ -2298,6 +2317,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         dropdownType={DropdownType.SELECT}
                                         type={Type.TERT}
                                     />
+                                    <div
+                                        className="presBox-show-hide-dropdown"
+                                        onClick={e => {
+                                            e.stopPropagation();
+                                            this.setSpringEditorVisibility(!this.showSpringEditor);
+                                        }}>
+                                        {`${this.showSpringEditor ? 'Hide' : 'Show'} Spring Settings`}
+                                        <FontAwesomeIcon icon={this.showSpringEditor ? 'chevron-up' : 'chevron-down'} />
+                                    </div>
                                     {this.showSpringEditor && (
                                         <>
                                             <div>Tension</div>
@@ -2363,11 +2391,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             )}
                             {/* Effect spring settings */}
                         </div>
-                        <div className="ribbon-final-box">
+                        <Button text="Apply to all" type={Type.TERT} color={StrCast(Doc.UserDoc().userVariantColor)} onClick={() => this.applyTo(this.childDocs)} />
+                        {/* <div className="ribbon-final-box">
                             <div className="ribbon-final-button-hidden" onClick={() => this.applyTo(this.childDocs)}>
                                 Apply to all
                             </div>
-                        </div>
+                        </div> */}
                     </div>
                 </>
             );