fixed audiobox

2 files changed, 257 insertions, 241 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index ac2b19fd6..a6494e540 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -3,202 +3,220 @@
 
 .audiobox-container,
 .audiobox-container-interactive {
-  width: 100%;
-  height: 100%;
-  position: inherit;
-  display: flex;
-  position: relative;
-  cursor: default;
-
-  .audiobox-buttons {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    height: 100%;
-
-    .audiobox-dictation {
-      position: relative;
-      width: 30px;
-      height: 100%;
-      align-items: center;
-      display: inherit;
-      background: $medium-gray;
-      left: 0px;
-      color: $dark-gray;
-      &:hover {
-        color: $black;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .audiobox-control,
-  .audiobox-control-interactive {
-    top: 0;
-    max-height: 32px;
-    width: 100%;
-    display: inline-block;
-    pointer-events: none;
-  }
-
-  .audiobox-control-interactive {
-    pointer-events: all;
-  }
-
-  .audiobox-record-interactive,
-  .audiobox-record {
-    pointer-events: all;
     width: 100%;
     height: 100%;
+    position: inherit;
+    display: flex;
     position: relative;
-  }
+    cursor: default;
 
-  .audiobox-record {
-    pointer-events: none;
-  }
+    .audiobox-buttons {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        height: 100%;
+
+        .audiobox-dictation {
+            position: relative;
+            width: 30px;
+            height: 100%;
+            align-items: center;
+            display: inherit;
+            background: $medium-gray;
+            left: 0px;
+            color: $dark-gray;
+
+            &:hover {
+                color: $black;
+                cursor: pointer;
+            }
+        }
+    }
 
-  .recording {
-    margin-top: auto;
-    margin-bottom: auto;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    padding-right: 5px;
-    display: flex;
-    background-color: $medium-blue;
-
-    .time {
-      position: relative;
-      height: 100%;
-      width: 100%;
-      font-size: $large-header;
-      text-align: center;
-      top: 5;
+    .audiobox-control,
+    .audiobox-control-interactive {
+        top: 0;
+        max-height: 32px;
+        width: 100%;
+        display: inline-block;
+        pointer-events: none;
     }
 
-    .buttons {
-      position: relative;
-      margin-top: auto;
-      margin-bottom: auto;
-      width: 25px;
-      width: 25px;
-      padding: 5px;
-      color: $dark-gray;
-      &:hover {
-        color: $black;
-      }
+    .audiobox-control-interactive {
+        pointer-events: all;
     }
-  }
 
-  .audiobox-controls {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    background: $dark-gray;
+    .audiobox-record-interactive,
+    .audiobox-record {
+        pointer-events: all;
+        cursor: pointer;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        color: white;
+        font-weight: bold;
+    }
 
-    .audiobox-dictation {
-      position: absolute;
-      width: 40px;
-      height: 100%;
-      align-items: center;
-      display: inherit;
-      background: $medium-gray;
-      left: 0px;
+    .audiobox-record {
+        pointer-events: none;
     }
 
-    .audiobox-player {
-      margin-top: auto;
-      margin-bottom: auto;
-      width: 100%;
-      position: relative;
-      padding-right: 5px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .audiobox-buttons {
-        position: relative;
+    .recording {
         margin-top: auto;
         margin-bottom: auto;
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        background-color: $dark-gray;
-        color: $white;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        padding-right: 5px;
         display: flex;
-        align-items: center;
+        flex-direction: row;
         justify-content: center;
-        left: 5px;
-        &:hover {
-          background-color: $black;
+        align-items: center;
+        gap: 7px;
+        background-color: $medium-blue;
+        padding: 10px;
+
+        .time {
+            position: relative;
+            height: 100%;
+            width: 100%;
+            font-size: 16px;
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: bold;
         }
 
-        svg {
-          width: 100%;
-          position: absolute;
-          border-width: "thin";
-          border-color: "white";
+        .buttons {
+            cursor: pointer;
+            position: relative;
+            margin-top: auto;
+            margin-bottom: auto;
+            width: 25px;
+            width: 25px;
+            padding: 5px;
+            color: $dark-gray;
+
+            &:hover {
+                color: $black;
+            }
         }
-      }
+    }
 
-      .audiobox-dictation {
+    .audiobox-controls {
+        width: 100%;
+        height: 100%;
         position: relative;
-        margin-top: auto;
-        margin-bottom: auto;
-        width: 25px;
-        align-items: center;
-        display: inherit;
-        background: $medium-gray;
-      }
+        display: flex;
+        background: $dark-gray;
+
+        .audiobox-dictation {
+            position: absolute;
+            width: 40px;
+            height: 100%;
+            align-items: center;
+            display: inherit;
+            background: $medium-gray;
+            left: 0px;
+        }
 
-      .audiobox-timeline {
-        position: absolute;
-        width: 100%;
-        z-index: 1000;
-        overflow: hidden;
-        border-right: 5px solid black;
-      }
-
-      .audioBox-total-time,
-      .audioBox-current-time {
-        position: absolute;
-        font-size: $small-text;
-        top: 100%;
-        color: $white;
-      }
-      .audioBox-current-time {
-        left: 42px;
-      }
-
-      .audioBox-total-time {
-        right: 2px;
-      }
+        .audiobox-player {
+            margin-top: auto;
+            margin-bottom: auto;
+            width: 100%;
+            position: relative;
+            padding-right: 5px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            .audiobox-buttons {
+                position: relative;
+                margin-top: auto;
+                margin-bottom: auto;
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                background-color: $dark-gray;
+                color: $white;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                left: 5px;
+
+                &:hover {
+                    background-color: $black;
+                }
+
+                svg {
+                    width: 100%;
+                    position: absolute;
+                    border-width: "thin";
+                    border-color: "white";
+                }
+            }
+
+            .audiobox-dictation {
+                position: relative;
+                margin-top: auto;
+                margin-bottom: auto;
+                width: 25px;
+                align-items: center;
+                display: inherit;
+                background: $medium-gray;
+            }
+
+            .audiobox-timeline {
+                position: absolute;
+                width: 100%;
+                z-index: 1000;
+                overflow: hidden;
+                border-right: 5px solid black;
+            }
+
+            .audioBox-total-time,
+            .audioBox-current-time {
+                position: absolute;
+                font-size: $small-text;
+                top: 100%;
+                color: $white;
+            }
+
+            .audioBox-current-time {
+                left: 42px;
+            }
+
+            .audioBox-total-time {
+                right: 2px;
+            }
+        }
     }
-  }
 }
 
 @media only screen and (max-device-width: 480px) {
-  .audiobox-dictation {
-    font-size: 5em;
-    display: flex;
-    width: 100;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .audiobox-container .audiobox-record,
-  .audiobox-container-interactive .audiobox-record {
-    font-size: 3em;
-  }
-
-  .audiobox-container .audiobox-controls .audiobox-player .audiobox-buttons,
-  .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
-  .audiobox-container-interactive
-    .audiobox-controls
-    .audiobox-player
-    .audiobox-buttons {
-    width: 70px;
-  }
-}
+    .audiobox-dictation {
+        font-size: 5em;
+        display: flex;
+        width: 100;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .audiobox-container .audiobox-record,
+    .audiobox-container-interactive .audiobox-record {
+        font-size: 3em;
+    }
+
+    .audiobox-container .audiobox-controls .audiobox-player .audiobox-buttons,
+    .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
+    .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-buttons {
+        width: 70px;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 8962d29f0..cdb37bf92 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -336,8 +336,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                 (this.layoutDoc.dontAutoPlayFollowedLinks ? "" : "Don't") +
                 " play when link is selected",
             event: () =>
-                (this.layoutDoc.dontAutoPlayFollowedLinks =
-                    !this.layoutDoc.dontAutoPlayFollowedLinks),
+            (this.layoutDoc.dontAutoPlayFollowedLinks =
+                !this.layoutDoc.dontAutoPlayFollowedLinks),
             icon: "expand-arrows-alt",
         });
         funcs.push({
@@ -605,10 +605,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                         <div className="audiobox-dictation" onClick={this.onFile}>
                             <FontAwesomeIcon
                                 style={{
-                                    width: "30px",
-                                    background: !this.layoutDoc.dontAutoPlayFollowedLinks
-                                        ? Colors.LIGHT_BLUE
-                                        : "rgba(0,0,0,0)",
+                                    width: "30px"
                                 }}
                                 icon="file-alt"
                                 size={this.props.PanelHeight() < 36 ? "1x" : "2x"}
@@ -638,76 +635,77 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                                 </div>
                             </div>
                         ) : (
-                                <div
-                                    className={`audiobox-record${interactive}`}
-                                    style={{ backgroundColor: Colors.DARK_GRAY }}
-                                >
-                                    RECORD
-                                </div>
-                            )}
+                            <div
+                                className={`audiobox-record${interactive}`}
+                                style={{ backgroundColor: Colors.DARK_GRAY }}
+                            >
+                                <FontAwesomeIcon icon="microphone" />
+                                RECORD
+                            </div>
+                        )}
                     </div>
                 ) : (
+                    <div
+                        className="audiobox-controls"
+                        style={{
+                            pointerEvents:
+                                this._isAnyChildContentActive || this.props.isContentActive()
+                                    ? "all"
+                                    : "none",
+                        }}
+                    >
+                        <div className="audiobox-dictation" />
                         <div
-                            className="audiobox-controls"
-                            style={{
-                                pointerEvents:
-                                    this._isAnyChildContentActive || this.props.isContentActive()
-                                        ? "all"
-                                        : "none",
-                            }}
+                            className="audiobox-player"
+                            style={{ height: `${AudioBox.heightPercent}%` }}
                         >
-                            <div className="audiobox-dictation" />
                             <div
-                                className="audiobox-player"
-                                style={{ height: `${AudioBox.heightPercent}%` }}
+                                className="audiobox-buttons"
+                                title={this.mediaState === "paused" ? "play" : "pause"}
+                                onClick={this.mediaState === "paused" ? this.Play : this.Pause}
                             >
-                                <div
-                                    className="audiobox-buttons"
-                                    title={this.mediaState === "paused" ? "play" : "pause"}
-                                    onClick={this.mediaState === "paused" ? this.Play : this.Pause}
-                                >
-                                    {" "}
-                                    <FontAwesomeIcon
-                                        icon={this.mediaState === "paused" ? "play" : "pause"}
-                                        size={"1x"}
-                                    />
-                                </div>
-                                <div
-                                    className="audiobox-buttons"
-                                    title={this._trimming ? "finish" : "trim"}
-                                    onClick={this._trimming ? this.finishTrim : this.startTrim}
-                                >
-                                    <FontAwesomeIcon
-                                        icon={this._trimming ? "check" : "cut"}
-                                        size={"1x"}
-                                    />
-                                </div>
-                                <div
-                                    className="audiobox-timeline"
-                                    style={{
-                                        top: 0,
-                                        height: `100%`,
-                                        left: AudioBox.playheadWidth,
-                                        width: `calc(100% - ${AudioBox.playheadWidth}px)`,
-                                        background: "white",
-                                    }}
-                                >
-                                    {this.renderTimeline}
-                                </div>
-                                {this.audio}
-                                <div className="audioBox-current-time">
-                                    {this._trimming ?
-                                        formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))
-                                        : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))}
-                                </div>
-                                <div className="audioBox-total-time">
-                                    {this._trimming || !this._trimEnd ?
-                                        formatTime(Math.round(NumCast(this.duration)))
-                                        : formatTime(Math.round(NumCast(this.trimDuration)))}
-                                </div>
+                                {" "}
+                                <FontAwesomeIcon
+                                    icon={this.mediaState === "paused" ? "play" : "pause"}
+                                    size={"1x"}
+                                />
+                            </div>
+                            <div
+                                className="audiobox-buttons"
+                                title={this._trimming ? "finish" : "trim"}
+                                onClick={this._trimming ? this.finishTrim : this.startTrim}
+                            >
+                                <FontAwesomeIcon
+                                    icon={this._trimming ? "check" : "cut"}
+                                    size={"1x"}
+                                />
+                            </div>
+                            <div
+                                className="audiobox-timeline"
+                                style={{
+                                    top: 0,
+                                    height: `100%`,
+                                    left: AudioBox.playheadWidth,
+                                    width: `calc(100% - ${AudioBox.playheadWidth}px)`,
+                                    background: "white",
+                                }}
+                            >
+                                {this.renderTimeline}
+                            </div>
+                            {this.audio}
+                            <div className="audioBox-current-time">
+                                {this._trimming ?
+                                    formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))
+                                    : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))}
+                            </div>
+                            <div className="audioBox-total-time">
+                                {this._trimming || !this._trimEnd ?
+                                    formatTime(Math.round(NumCast(this.duration)))
+                                    : formatTime(Math.round(NumCast(this.trimDuration)))}
                             </div>
                         </div>
-                    )}
+                    </div>
+                )}
             </div>
         );
     }