Add start of visual segment editing

Author: ajayyy

public/_locales/en/messages.json

@@ -305,6 +305,10 @@
     "mute": {
         "message": "Mute"
     },
+    "visual": {
+        "message": "Visual",
+        "description": "This is the name of the option to create visual obstructions on top of the video to hide logos when a skip doesn't work."
+    },
     "skip_category": {
         "message": "Skip {0}?"
     },

src/components/SponsorTimeEditComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
-import { ActionType, ActionTypes, Category, CategoryActionType, ContentContainer, SponsorTime } from "../types";
+import { ActionType, Category, CategoryActionType, ContentContainer, SponsorTime } from "../types";
 import Utils from "../utils";
 import { getCategoryActionType } from "../utils/categoryUtils";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";

src/components/VisualSegmentEditComponent.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import Config from "../config";
+import { ContentContainer, VisualSegmentInfo } from "../types";
+import Utils from "../utils";
+
+
+const utils = new Utils();
+
+export interface VisualSegmentEditProps {
+    index: number,
+
+    visual: VisualSegmentInfo,
+
+    idSuffix: string,
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer,
+}
+
+export interface VisualSegmentEditState {
+
+}
+
+class VisualSegmentEditComponent extends React.Component<VisualSegmentEditProps, VisualSegmentEditState> {
+
+    idSuffix: string;
+
+    configUpdateListener: () => void;
+
+    constructor(props: VisualSegmentEditProps) {
+        super(props);
+
+        this.idSuffix = this.props.idSuffix;
+
+        this.state = {
+        };
+    }
+
+    componentDidMount(): void {
+        // Add as a config listener
+        if (!this.configUpdateListener) {
+            this.configUpdateListener = () => this.configUpdate();
+            Config.configListeners.push(this.configUpdate.bind(this));
+        }
+    }
+
+    componentWillUnmount(): void {
+        if (this.configUpdateListener) {
+            Config.configListeners.splice(Config.configListeners.indexOf(this.configUpdate.bind(this)), 1);
+        }
+    }
+
+    render(): React.ReactElement {
+        return <>
+            <span id={`time${this.props.idSuffix}`}>
+                {utils.getFormattedTime(this.props.visual.time, true)}
+            </span>
+
+            <span>
+                -
+            </span>
+
+            {this.getBoundsElement()}
+
+            <span>
+                -
+            </span>
+
+            <input
+                type="checkBox"
+                onChange={(event) => this.colorUpdated(event)}
+                value={this.props.visual.color} 
+            />
+
+            <span>
+                Smooth
+            </span>
+
+            <span>
+                -
+            </span>
+
+            <input
+                className="categoryColorTextBox"
+                type="color"
+                onChange={(event) => this.colorUpdated(event)}
+                value={this.props.visual.color} 
+            />
+
+
+        </>
+    }
+
+    getBoundsElement(): React.ReactElement[] {
+        const elements: React.ReactElement[] = [];
+
+        for (const bound of this.props.visual.bounds) {
+            elements.push(
+                <span>
+                    {`${bound[0] * 100}% x ${bound[0] * 100}%, `}
+                </span>
+            );
+        }
+
+        return elements;
+    }
+
+    colorUpdated(event: React.ChangeEvent<HTMLInputElement>): void {
+        this.props.visual.color = event.target.value;
+    }
+
+    configUpdate(): void {
+        this.forceUpdate();
+    }
+}
+
+export default VisualSegmentEditComponent;

src/js-components/skipButtonControlBar.ts

@@ -40,7 +40,9 @@ export class SkipButtonControlBar {
         this.container.appendChild(this.textContainer);
         this.container.addEventListener("click", () => this.toggleSkip());
         this.container.addEventListener("mouseenter", () => this.stopTimer());
+        this.container.addEventListener("mouseenter", () => console.log("mouseenter"));
         this.container.addEventListener("mouseleave", () => this.startTimer());
+        this.container.addEventListener("mouseleave", () => console.log("mouseleave"));
     }
 
     getElement(): HTMLElement {

src/types.ts

@@ -58,11 +58,10 @@ export enum CategoryActionType {
 
 export enum ActionType {
     Skip = "skip",
-    Mute = "mute"
+    Mute = "mute",
+    Visual = "visual",
 }
 
-export const ActionTypes = [ActionType.Skip, ActionType.Mute];
-
 export type SegmentUUID = string  & { __segmentUUIDBrand: unknown };
 export type Category = string & { __categoryBrand: unknown };
 
@@ -80,6 +79,16 @@ export interface SponsorTime {
 
     hidden?: SponsorHideType;
     source?: SponsorSourceType;
+
+    visual: string;
+}
+
+export interface VisualSegmentInfo {
+    time: number;
+    bounds: [number, number][];
+    smooth: boolean;
+    curve: string;
+    color: string;
 }
 
 export interface ScheduledTime extends SponsorTime {

src/utils/visualUtils.ts

@@ -0,0 +1,9 @@
+import { VisualSegmentInfo } from "../types";
+
+export function toSVG(visuals: VisualSegmentInfo[]): string {
+    throw new Error("Method not implemented.");
+}
+
+export function toVisualSegmentInfo(svg: string): VisualSegmentInfo {
+    throw new Error("Method not implemented.");
+}