Visual Segments

package.json

@@ -4,6 +4,7 @@
  "description": "",
  "main": "background.js",
  "dependencies": {
+ "@svgdotjs/svg.js": "^3.1.1",
  "@types/react": "^16.9.22",
  "@types/react-dom": "^16.9.5",
  "@types/selenium-webdriver": "^4.0.15",
@@ -13,7 +14,8 @@
  "babel-preset-env": "^1.7.0",
  "concurrently": "^5.1.0",
  "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react-dom": "^17.0.2",
+ "svgdom": "^0.1.8"
  },
  "devDependencies": {
  "@types/chrome": "0.0.91",

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,29 @@
+import { VisualSegmentInfo } from "../types";
+import { Svg, SVG } from "@svgdotjs/svg.js";
+
+export function toSVG(visuals: VisualSegmentInfo[]): Svg {
+ const svg = SVG().size(100, 100);
+
+ for (const visual of visuals) {
+ const path = svg.polygon();
+ path.fill(visual.color);
+ // path.stroke({
+ // width: 1,
+ // color: visual.color
+ // });
+ path.plot(visual.bounds);
+ }
+
+ console.log(svg.svg());
+
+ return svg;
+}
+
+export function toVisualSegmentInfo(svgInput: string | Svg): VisualSegmentInfo {
+ let svg = svgInput as Svg;
+ if (typeof svgInput === "string") {
+ svg = SVG().svg(svgInput);
+ }
+
+ throw new Error("Method not implemented.");
+}

test/visualSegments.test.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import { createSVGWindow } from "svgdom";
+import { registerWindow } from "@svgdotjs/svg.js";
+
+import { toSVG } from "../src/utils/visualUtils";
+
+beforeAll(() => {
+ const window = createSVGWindow();
+ registerWindow(window, window.document)
+})
+
+test("Visual Segment SVG converter", async () => {
+ toSVG([{
+ time: 0,
+ bounds: [[0, 0], [25, 0], [25, 40], [0, 30]],
+ smooth: false,
+ curve: "linear",
+ color: "#000000",
+ }]);
+});