Add option to share split times to YouTube or LosslessCut

src/css/ShareTimes.module.css

@@ -0,0 +1,114 @@
+.shareTimes {
+    display: flex;
+    padding: var(--ui-large-margin);
+
+    :global(.is-mobile) & {
+        width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-large-margin);
+    width: 100%;
+    max-width: 480px;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-margin);
+}
+
+.label {
+    font-weight: bold;
+}
+
+.runSelect {
+    width: 100%;
+    height: 40px;
+    box-sizing: border-box;
+    padding: 0 6px;
+    appearance: none;
+    background: var(--button-middle-color);
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    color: var(--button-text-color);
+    cursor: pointer;
+    font-family: "fira", sans-serif;
+    font-size: 20px;
+    text-align: left;
+    text-overflow: ellipsis;
+}
+
+.offsetRow {
+    display: flex;
+    gap: var(--ui-margin);
+    align-items: flex-end;
+    width: 100%;
+}
+
+.offsetCell {
+    flex: 5 1 0;
+    min-width: 0;
+}
+
+.fpsCell {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.error {
+    color: #e46;
+    font-size: 0.9em;
+}
+
+.warning {
+    color: #e9a13b;
+    font-size: 0.9em;
+}
+
+.timingMethod {
+    opacity: 0.7;
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.activeTab {
+    box-shadow: inset 3px 0 0 var(--button-text-color);
+    font-weight: bold;
+}
+
+.buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ui-margin);
+
+    button {
+        margin: 0;
+    }
+}
+
+.youtube {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-margin);
+}
+
+.youtubeText {
+    width: 100%;
+    box-sizing: border-box;
+    resize: vertical;
+    font-family: var(--fira, monospace);
+    white-space: pre;
+}
+
+.copyButton {
+    align-self: flex-start;
+    margin: 0;
+}

src/ui/LiveSplit.tsx

@@ -42,6 +42,7 @@ import {
 import { TimerView } from "./views/TimerView";
 import { About } from "./views/About";
 import { SplitsSelection, EditingInfo } from "./views/SplitsSelection";
+import { ShareTimes, ShareTimesInfo } from "./views/ShareTimes";
 import { LayoutView } from "./views/LayoutView";
 import { ToastContainer, toast } from "react-toastify";
 import * as Storage from "../storage";
@@ -99,6 +100,7 @@ export enum MenuKind {
     Timer,
     Splits,
     RunEditor,
+    ShareTimes,
     Layout,
     LayoutEditor,
     MainSettings,
@@ -119,6 +121,7 @@ type Menu =
     | { kind: MenuKind.Timer }
     | { kind: MenuKind.Splits }
     | { kind: MenuKind.RunEditor; editor: RunEditor; splitsKey?: number }
+    | { kind: MenuKind.ShareTimes; run: Run; splitsKey?: number }
     | { kind: MenuKind.Layout }
     | { kind: MenuKind.LayoutEditor; editor: LayoutEditor }
     | { kind: MenuKind.MainSettings; config: HotkeyConfig }
@@ -478,6 +481,10 @@ export class LiveSplit extends React.Component<Props, State> {
                     splitsModified={this.state.splitsModified}
                 />
             );
+        } else if (this.state.menu.kind === MenuKind.ShareTimes) {
+            view = (
+                <ShareTimes run={this.state.menu.run} callbacks={this} />
+            );
         } else if (this.state.menu.kind === MenuKind.Timer) {
             view = (
                 <TimerView
@@ -772,6 +779,21 @@ export class LiveSplit extends React.Component<Props, State> {
         this.openSplitsView();
     }
 
+    public openShareTimes({ splitsKey, run }: ShareTimesInfo) {
+        this.changeMenu({ kind: MenuKind.ShareTimes, run, splitsKey });
+    }
+
+    public closeShareTimes() {
+        if (this.state.menu.kind !== MenuKind.ShareTimes) {
+            panic(
+                "No Share Times view to close",
+                this.state.generalSettings.lang,
+            );
+        }
+        this.state.menu.run[Symbol.dispose]();
+        this.openSplitsView();
+    }
+
     public setSplitsKey(openedSplitsKey?: number) {
         this.setState({
             openedSplitsKey,

src/ui/components/TextBox.tsx

@@ -10,6 +10,8 @@ export function TextBox({
     label,
     invalid,
     list,
+    disabled,
+    placeholder,
 }: {
     className?: string;
     value?: string | number | readonly string[];
@@ -18,6 +20,8 @@ export function TextBox({
     label: string;
     invalid?: boolean;
     list?: [string, string[]];
+    disabled?: boolean;
+    placeholder?: string;
 }) {
     let outerClassName = classes.group;
     if (invalid) {
@@ -43,6 +47,8 @@ export function TextBox({
                 list={name}
                 type="text text-box"
                 required
+                disabled={disabled}
+                placeholder={placeholder}
                 className={className}
                 value={value}
                 onChange={onChange}