cubing 0.22.0 → 0.24.0-pre2

package/src/cubing/twisty/views/TwistyPlayer.ts

@@ -1,362 +0,0 @@
-import type { ExperimentalStickering, PG3D } from "..";
-import type { Alg, Move } from "../../alg";
-import type { PuzzleDescriptionString } from "../../puzzle-geometry/PGPuzzles";
-import type { TwistyAnimationControllerDelegate } from "../controllers/TwistyAnimationController";
-import { TwistyPlayerController } from "../controllers/TwistyPlayerController";
-import type { HintFaceletStyleWithAuto } from "../model/props/puzzle/display/HintFaceletProp";
-import type { MovePressInput } from "../model/props/puzzle/state/MovePressInputProp";
-import type { SetupToLocation } from "../model/props/puzzle/state/SetupAnchorProp";
-import type { PuzzleID } from "../model/props/puzzle/structure/PuzzleIDRequestProp";
-import type { BackgroundThemeWithAuto } from "../model/props/viewer/BackgroundProp";
-import type { BackViewLayoutWithAuto } from "../model/props/viewer/BackViewProp";
-import {
-  ControlPanelThemeWithAuto,
-  controlsLocations,
-} from "../model/props/viewer/ControlPanelProp";
-import type { ViewerLinkPageWithAuto } from "../model/props/viewer/ViewerLinkProp";
-import type { VisualizationFormatWithAuto } from "../model/props/viewer/VisualizationProp";
-import type { VisualizationStrategy } from "../model/props/viewer/VisualizationStrategyProp";
-import { ClassListManager } from "./ClassListManager";
-import { customElementsShim } from "./node-custom-element-shims";
-import { twistyPlayerCSS } from "./TwistyPlayer.css";
-
-import { Twisty2DSceneWrapper } from "./2D/Twisty2DSceneWrapper";
-import { Twisty3DSceneWrapper } from "./3D/Twisty3DSceneWrapper";
-import { TwistyButtonsV2 } from "./control-panel/TwistyButtonsV2";
-import { TwistyScrubberV2 } from "./control-panel/TwistyScrubberV2";
-import { downloadURL, getDefaultFilename, screenshot } from "./screenshot";
-import { TwistyPlayerSettable } from "./TwistyPlayerSettable";
-
-// TODO: I couldn't figure out how to use use more specific types. Ideally, we'd
-// enforce consistency with the model.
-export const twistyPlayerAttributeMap = {
-  // TODO: We assume each of these can be set using a string or will be automatically converted by JS (e.g. numbers). Can we enforce
-  // that with types? Do we need to add a translation mechanism for things we
-  // don't want to leave settable as strings?
-  // TODO: Enum validation.
-
-  // Alg
-  "alg": "alg",
-  "experimental-setup-alg": "experimentalSetupAlg",
-
-  // String-based
-  "experimental-setup-anchor": "experimentalSetupAnchor",
-  "puzzle": "puzzle",
-  "experimental-puzzle-description": "experimentalPuzzleDescription",
-  "visualization": "visualization",
-  "hint-facelets": "hintFacelets",
-  "experimental-stickering": "experimentalStickering",
-  "background": "background",
-  "control-panel": "controlPanel",
-  "back-view": "backView",
-  // "indexer": "indexer",
-  "viewer-link": "viewerLink",
-  "experimental-move-press-input": "experimentalMovePressInput",
-
-  // Number-based
-  "camera-latitude": "cameraLatitude",
-  "camera-longitude": "cameraLongitude",
-  "camera-distance": "cameraDistance",
-  "camera-latitude-limit": "cameraLatitudeLimit",
-  "tempo-scale": "tempoScale",
-
-  // URL-based
-  "experimental-sprite": "experimentalSprite",
-  "experimental-hint-sprite": "experimentalHintSprite",
-};
-
-export type TwistyPlayerAttribute = keyof typeof twistyPlayerAttributeMap;
-
-const configKeys: Record<TwistyPlayerAttribute, true> = Object.fromEntries(
-  Object.values(twistyPlayerAttributeMap).map((s) => [s, true]),
-) as any;
-
-// TODO: Find a way to share this def with `attributeMap`.
-export interface TwistyPlayerConfig {
-  // Alg
-  alg?: Alg | string;
-  experimentalSetupAlg?: Alg | string;
-
-  // String-based
-  experimentalSetupAnchor?: SetupToLocation; // TODO: "auto"
-  puzzle?: PuzzleID;
-  experimentalPuzzleDescription?: PuzzleDescriptionString;
-  visualization?: VisualizationFormatWithAuto;
-  hintFacelets?: HintFaceletStyleWithAuto;
-  experimentalStickering?: ExperimentalStickering;
-  background?: BackViewLayoutWithAuto;
-  controlPanel?: ControlPanelThemeWithAuto;
-  backView?: BackViewLayoutWithAuto;
-  // "indexer"?: "indexer";
-  viewerLink?: ViewerLinkPageWithAuto;
-  experimentalMovePressInput?: MovePressInput;
-
-  // Number-based
-  cameraLatitude?: number;
-  cameraLongitude?: number;
-  cameraDistance?: number;
-  cameraLatitudeLimit?: number;
-  tempoScale?: number;
-
-  // URL-based
-  experimentalSprite?: string | null;
-  experimentalHintSprite?: string | null;
-}
-
-/**
- * TwistyPlayer is the heart of `cubing.js`. It can be used to display a puzzle on a web page like this:
- *
- *     <script src="path/to/cubing/twisty" type="module"></script>
- *     <twisty-player alg="R U R'"></twisty-player>
- *
- * You can also construct it directly in JavaScript:
- *
- *     import { TwistyPlayer } from "cubing/twisty";
- *     const twistyPlayer = new TwistyPlayer({alg: "R U R'"});
- *     // Once the page has loaded, you can do this:
- *     document.body.appendChild(twistyPlayer);
- *
- * See {@link https://js.cubing.net/cubing/} for more examples.
- */
-export class TwistyPlayer
-  extends TwistyPlayerSettable
-  implements TwistyAnimationControllerDelegate
-{
-  controller: TwistyPlayerController = new TwistyPlayerController(
-    this.experimentalModel,
-    this,
-  );
-
-  buttons: TwistyButtonsV2;
-
-  experimentalCanvasClickCallback: (...args: any) => void = () => {};
-  // #onCanvasClick() {
-
-  // }
-
-  constructor(config: TwistyPlayerConfig = {}) {
-    super();
-
-    // TODO: double-check that these are all getting set sync without causing extra work.
-    for (const [propName, value] of Object.entries(config)) {
-      if (!configKeys[propName as TwistyPlayerAttribute]) {
-        console.warn(`Invalid config passed to TwistyPlayer: ${propName}`);
-        break;
-      }
-      (this as any)[propName] = value;
-    }
-  }
-
-  #controlsManager: ClassListManager<ControlPanelThemeWithAuto> =
-    new ClassListManager<ControlPanelThemeWithAuto>(
-      this,
-      "controls-",
-      (["auto"] as ControlPanelThemeWithAuto[]).concat(
-        Object.keys(controlsLocations) as ControlPanelThemeWithAuto[],
-      ),
-    );
-
-  #visualizationWrapperElem = document.createElement("div"); // TODO: Better pattern.
-  #errorElem = document.createElement("div"); // TODO: Better pattern.
-  #alreadyConnected = false; // TODO: support resetting
-  async connectedCallback(): Promise<void> {
-    if (this.#alreadyConnected) {
-      return;
-    }
-    this.#alreadyConnected = true;
-    this.addCSS(twistyPlayerCSS);
-
-    this.addElement(this.#visualizationWrapperElem).classList.add(
-      "visualization-wrapper",
-    );
-    this.addElement(this.#errorElem).classList.add("error-elem");
-    this.#errorElem.textContent = "Error";
-    this.experimentalModel.userVisibleErrorTracker.addFreshListener(
-      (userVisibleError) => {
-        const errorString: string | null = userVisibleError.errors[0] ?? null;
-        this.contentWrapper.classList.toggle("error", !!errorString);
-        if (errorString) {
-          this.#errorElem.textContent = errorString;
-        }
-      },
-    );
-
-    const scrubber = new TwistyScrubberV2(this.experimentalModel);
-    this.contentWrapper.appendChild(scrubber);
-
-    this.buttons = new TwistyButtonsV2(
-      this.experimentalModel,
-      this.controller,
-      this,
-    );
-    this.contentWrapper.appendChild(this.buttons);
-
-    this.experimentalModel.backgroundProp.addFreshListener(
-      (backgroundTheme: BackgroundThemeWithAuto) => {
-        this.contentWrapper.classList.toggle(
-          "checkered",
-          backgroundTheme !== "none",
-        );
-      },
-    );
-
-    this.experimentalModel.controlPanelProp.addFreshListener(
-      (controlPanel: ControlPanelThemeWithAuto) => {
-        this.#controlsManager.setValue(controlPanel);
-      },
-    );
-
-    this.experimentalModel.visualizationStrategyProp.addFreshListener(
-      this.#setVisualizationWrapper.bind(this),
-    );
-
-    this.experimentalModel.puzzleIDProp.addFreshListener(this.flash.bind(this));
-  }
-
-  flash() {
-    this.#visualizationWrapper?.animate([{ opacity: 0.25 }, { opacity: 1 }], {
-      duration: 250,
-    });
-  }
-
-  #visualizationWrapper: Twisty2DSceneWrapper | Twisty3DSceneWrapper | null =
-    null;
-
-  #visualizationStrategy: VisualizationStrategy | null = null;
-  #setVisualizationWrapper(strategy: VisualizationStrategy): void {
-    if (strategy !== this.#visualizationStrategy) {
-      this.#visualizationWrapper?.remove();
-      this.#visualizationWrapper?.disconnect();
-      let newWrapper: Twisty2DSceneWrapper | Twisty3DSceneWrapper;
-      switch (strategy) {
-        case "2D":
-        case "experimental-2D-LL":
-          newWrapper = new Twisty2DSceneWrapper(
-            this.experimentalModel,
-            strategy,
-          );
-          break;
-        case "Cube3D":
-        case "PG3D":
-          // TODO: Properly wire this up so we can set PG3D for the cube.
-          newWrapper = new Twisty3DSceneWrapper(this.experimentalModel);
-          break;
-        default:
-          throw new Error("Invalid visualization");
-      }
-      this.#visualizationWrapperElem.appendChild(newWrapper);
-      this.#visualizationWrapper = newWrapper;
-      this.#visualizationStrategy = strategy;
-    }
-  }
-
-  async experimentalCurrentCanvases(): Promise<HTMLCanvasElement[]> {
-    this.connectedCallback();
-    const wrapper = this.#visualizationWrapper;
-    const canvases: HTMLCanvasElement[] = [];
-    if (wrapper instanceof Twisty3DSceneWrapper) {
-      const vantages = wrapper.experimentalVantages();
-      for (const vantage of vantages) {
-        canvases.push((await vantage.canvasInfo()).canvas);
-      }
-    }
-    return canvases;
-  }
-
-  async experimentalPG3D(): Promise<PG3D | null> {
-    this.connectedCallback();
-    const wrapper = this.#visualizationWrapper;
-    if (wrapper instanceof Twisty3DSceneWrapper) {
-      wrapper;
-    }
-    return null;
-  }
-
-  jumpToStart(options?: { flash: boolean }): void {
-    this.controller.jumpToStart(options);
-  }
-
-  jumpToEnd(options?: { flash: boolean }): void {
-    this.controller.jumpToEnd(options);
-  }
-
-  play(): void {
-    this.controller.togglePlay(true);
-  }
-
-  pause(): void {
-    this.controller.togglePlay(false);
-  }
-
-  // Inspiration:
-  // - https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute (`force` argument)
-  // - https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle (`force` argument)
-  // We still provide `play()` and `pause()` individually for convenience, though.
-  togglePlay(play?: boolean): void {
-    this.controller.togglePlay(play);
-  }
-
-  // TODO: Animate the new move.
-  experimentalAddMove(
-    flexibleMove: Move | string,
-    options: { coalesce?: boolean } = {},
-  ): void {
-    this.experimentalModel.experimentalAddMove(flexibleMove, options);
-  }
-
-  static get observedAttributes(): string[] {
-    return Object.keys(twistyPlayerAttributeMap);
-  }
-
-  attributeChangedCallback(
-    attributeName: string,
-    _oldValue: string,
-    newValue: string,
-  ): void {
-    const setterName =
-      twistyPlayerAttributeMap[attributeName as TwistyPlayerAttribute];
-    if (!setterName) {
-      return;
-    }
-
-    (this as any)[setterName] = newValue;
-  }
-
-  // TODO: Make this more ergonomic and flexible.
-  // TODO: dimensions.
-  async experimentalScreenshot(options?: {
-    width: number;
-    height: number;
-  }): Promise<string> {
-    return (await screenshot(this.experimentalModel, options)).dataURL;
-  }
-
-  // TODO: Make this more ergonomic and flexible.
-  // TODO: dimensions.
-  async experimentalDownloadScreenshot(filename?: string): Promise<void> {
-    if (
-      ["2D", "experimental-2D-LL"].includes(
-        await this.experimentalModel.visualizationStrategyProp.get(),
-      )
-    ) {
-      // TODO: This has lots of async issues. It should also go into the screenshot impl file.
-      const wrapper2D = this.#visualizationWrapper as Twisty2DSceneWrapper;
-      const twisty2DPuzzle = await wrapper2D
-        .currentTwisty2DPuzzleWrapper()!
-        .twisty2DPuzzle();
-      const str = new XMLSerializer().serializeToString(
-        twisty2DPuzzle.svg.element,
-      );
-      const url = URL.createObjectURL(new Blob([str]));
-      downloadURL(
-        url,
-        filename ?? (await getDefaultFilename(this.experimentalModel)),
-        "svg",
-      );
-    } else {
-      await (await screenshot(this.experimentalModel)).download(filename);
-    }
-  }
-}
-
-customElementsShim.define("twisty-player", TwistyPlayer);

package/src/cubing/twisty/views/TwistyPlayerSettable.ts

@@ -1,115 +0,0 @@
-import type { Alg } from "../../alg";
-import type { PuzzleDescriptionString } from "../../puzzle-geometry/PGPuzzles";
-import type { ExperimentalStickering, PuzzleID } from "../../twisty";
-import type { BackgroundThemeWithAuto } from "../model/props/viewer/BackgroundProp";
-import type { BackViewLayoutWithAuto } from "../model/props/viewer/BackViewProp";
-import type { ControlPanelThemeWithAuto } from "../model/props/viewer/ControlPanelProp";
-import type { HintFaceletStyleWithAuto } from "../model/props/puzzle/display/HintFaceletProp";
-import type { IndexerStrategyName } from "../model/props/puzzle/state/IndexerConstructorRequestProp";
-import type { TimestampRequest } from "../model/props/timeline/TimestampRequestProp";
-import type { ViewerLinkPageWithAuto } from "../model/props/viewer/ViewerLinkProp";
-import type { VisualizationFormatWithAuto } from "../model/props/viewer/VisualizationProp";
-import { TwistyPlayerModel } from "../model/TwistyPlayerModel";
-import type { MillisecondTimestamp } from "../controllers/AnimationTypes";
-import { ManagedCustomElement } from "./ManagedCustomElement";
-import type { MovePressInput } from "../model/props/puzzle/state/MovePressInputProp";
-import type { SetupToLocation } from "../model/props/puzzle/state/SetupAnchorProp";
-
-function err(propName: string): Error {
-  return new Error(
-    `Cannot get \`.${propName}\` directly from a \`TwistyPlayer\`.`,
-  );
-}
-
-// prettier-ignore
-export abstract class TwistyPlayerSettable extends ManagedCustomElement {
-  experimentalModel: TwistyPlayerModel = new TwistyPlayerModel();
-
-  set alg(newAlg: Alg | string) { this.experimentalModel.algProp.set(newAlg); }
-  get alg(): never { throw err("alg"); }
-
-  set experimentalSetupAlg(newSetup: Alg | string) { this.experimentalModel.setupProp.set(newSetup); }
-  get experimentalSetupAlg(): never { throw err("setup"); }
-
-  set experimentalSetupAnchor(anchor: SetupToLocation) { this.experimentalModel.setupAnchorProp.set(anchor); }
-  get experimentalSetupAnchor(): never { throw err("anchor"); }
-
-  set puzzle(puzzleID: PuzzleID) { this.experimentalModel.puzzleIDRequestProp.set(puzzleID); }
-  get puzzle(): never { throw err("puzzle"); }
-
-  set experimentalPuzzleDescription(puzzleDescription: PuzzleDescriptionString) { this.experimentalModel.puzzleDescriptionRequestProp.set(puzzleDescription); }
-  get experimentalPuzzleDescription(): never { throw err("experimentalPuzzleDescription"); }
-
-  set timestamp(timestamp: TimestampRequest) { this.experimentalModel.timestampRequestProp.set(timestamp); }
-  get timestamp(): never { throw err("timestamp"); }
-
-  set hintFacelets(hintFaceletStyle: HintFaceletStyleWithAuto) { this.experimentalModel.hintFaceletProp.set(hintFaceletStyle); }
-  get hintFacelets(): never { throw err("hintFacelets"); }
-
-  set experimentalStickering(stickering: ExperimentalStickering) { this.experimentalModel.stickeringProp.set(stickering); }
-  get experimentalStickering(): never { throw err("stickering"); }
-
-  set backView(backView: BackViewLayoutWithAuto) { this.experimentalModel.backViewProp.set(backView); }
-  get backView(): never { throw err("backView"); }
-
-  set background(backgroundTheme: BackgroundThemeWithAuto) { this.experimentalModel.backgroundProp.set(backgroundTheme); }
-  get background(): never { throw err("background"); }
-
-  set controlPanel(newControlPanel: ControlPanelThemeWithAuto) { this.experimentalModel.controlPanelProp.set(newControlPanel); }
-  get controlPanel(): never { throw err("controlPanel"); }
-
-  set visualization(visualizationFormat: VisualizationFormatWithAuto) { this.experimentalModel.visualizationFormatProp.set(visualizationFormat); }
-  get visualization(): never { throw err("visualization"); }
-
-  set viewerLink(viewerLinkPage: ViewerLinkPageWithAuto) { this.experimentalModel.viewerLinkProp.set(viewerLinkPage); }
-  get viewerLink(): never { throw err("viewerLink"); }
-
-  set experimentalMovePressInput(movePressInput: MovePressInput) { this.experimentalModel.movePressInputProp.set(movePressInput); }
-  get experimentalMovePressInput(): never { throw err("experimentalMovePressInput"); }
-
-  set cameraLatitude(latitude: number) { this.experimentalModel.orbitCoordinatesRequestProp.set({ latitude }); }
-  get cameraLatitude(): never { throw err("cameraLatitude"); }
-
-  set cameraLongitude(longitude: number) { this.experimentalModel.orbitCoordinatesRequestProp.set({ longitude }); }
-  get cameraLongitude(): never { throw err("cameraLongitude"); }
-
-  set cameraDistance(distance: number) { this.experimentalModel.orbitCoordinatesRequestProp.set({ distance }); }
-  get cameraDistance(): never { throw err("cameraDistance"); }
-
-  set cameraLatitudeLimit(latitudeLimit: number) { this.experimentalModel.latitudeLimitProp.set(latitudeLimit); }
-  get cameraLatitudeLimit(): never { throw err("cameraLatitudeLimit"); }
-
-  set indexer(indexer: IndexerStrategyName) { this.experimentalModel.indexerConstructorRequestProp.set(indexer); }
-  get indexer(): never { throw err("indexer"); }
-
-  set tempoScale(newTempoScale: number) { this.experimentalModel.tempoScaleProp.set(newTempoScale); }
-  get tempoScale(): never { throw err("tempoScale"); }
-
-  set experimentalSprite(url: string | URL) { this.experimentalModel.foundationStickerSpriteURL.set(url); }
-  get experimentalSprite(): never { throw err("experimentalSprite"); }
-
-  set experimentalHintSprite(url: string | URL) { this.experimentalModel.hintStickerSpriteURL.set(url); }
-  get experimentalHintSprite(): never { throw err("experimentalHintSprite"); }
-
-  experimentalGet = new ExperimentalGetters(this.experimentalModel)
-}
-
-class ExperimentalGetters {
-  constructor(private model: TwistyPlayerModel) {}
-
-  async alg(): Promise<Alg> {
-    return (await this.model.algProp.get()).alg;
-  }
-
-  async setupAlg(): Promise<Alg> {
-    return (await this.model.setupProp.get()).alg;
-  }
-
-  puzzleID(): Promise<PuzzleID> {
-    return this.model.puzzleIDProp.get();
-  }
-
-  async timestamp(): Promise<MillisecondTimestamp> {
-    return (await this.model.detailedTimelineInfoProp.get()).timestamp;
-  }
-}

package/src/cubing/twisty/views/TwistyViewerWrapper.css.ts

@@ -1,41 +0,0 @@
-import { CSSSource } from "./ManagedCustomElement";
-
-export const twistyViewerWrapperCSS = new CSSSource(`
-:host {
-  width: 384px;
-  height: 256px;
-  display: grid;
-}
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  overflow: hidden;
-}
-
-.wrapper > * {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.wrapper.back-view-side-by-side {
-  grid-template-columns: 1fr 1fr;
-}
-
-.wrapper.back-view-top-right {
-  grid-template-columns: 3fr 1fr;
-  grid-template-rows: 1fr 3fr;
-}
-
-.wrapper.back-view-top-right > :nth-child(1) {
-  grid-row: 1 / 3;
-  grid-column: 1 / 3;
-}
-
-.wrapper.back-view-top-right > :nth-child(2) {
-  grid-row: 1 / 2;
-  grid-column: 2 / 3;
-}
-`);

package/src/cubing/twisty/views/canvas.ts

@@ -1,9 +0,0 @@
-let globalPixelRatioOverride: number | null = null;
-export function setGlobalPixelRatioOverride(override: number | null): void {
-  globalPixelRatioOverride = override;
-}
-
-// TODO: Handle if you move across screens?
-export function pixelRatio(): number {
-  return globalPixelRatioOverride ?? (devicePixelRatio || 1);
-}

package/src/cubing/twisty/views/control-panel/TwistyButtonsV2.css.ts

@@ -1,127 +0,0 @@
-import { CSSSource } from "../ManagedCustomElement";
-
-export const buttonGridCSS = new CSSSource(`
-:host {
-  width: 384px;
-  height: 24px;
-  display: grid;
-}
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  overflow: hidden;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-}
-
-.wrapper {
-  grid-auto-flow: column;
-}
-
-.viewer-link-none .twizzle-link-button {
-  display: none;
-}
-
-.wrapper twisty-button-v2,
-.wrapper twisty-control-button {
-  width: inherit;
-  height: inherit;
-}
-`);
-
-export const buttonCSS = new CSSSource(`
-:host:not([hidden]) {
-  display: grid;
-}
-
-:host {
-  width: 48px;
-  height: 24px;
-}
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-}
-
-button {
-  width: 100%;
-  height: 100%;
-  border: none;
-  
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-
-  background-color: rgba(196, 196, 196, 0.75);
-}
-
-button:enabled {
-  background-color: rgba(196, 196, 196, 0.75)
-}
-
-button:disabled {
-  background-color: rgba(0, 0, 0, 0.4);
-  opacity: 0.25;
-  pointer-events: none;
-}
-
-button:enabled:hover {
-  background-color: rgba(255, 255, 255, 0.75);
-  box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
-  cursor: pointer;
-}
-
-/* TODO: fullscreen icons have too much padding?? */
-.svg-skip-to-start button,
-button.svg-skip-to-start {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNjQzIDEwMzdxMTktMTkgMzItMTN0MTMgMzJ2MTQ3MnEwIDI2LTEzIDMydC0zMi0xM2wtNzEwLTcxMHEtOS05LTEzLTE5djcxMHEwIDI2LTEzIDMydC0zMi0xM2wtNzEwLTcxMHEtOS05LTEzLTE5djY3OHEwIDI2LTE5IDQ1dC00NSAxOUg5NjBxLTI2IDAtNDUtMTl0LTE5LTQ1VjEwODhxMC0yNiAxOS00NXQ0NS0xOWgxMjhxMjYgMCA0NSAxOXQxOSA0NXY2NzhxNC0xMSAxMy0xOWw3MTAtNzEwcTE5LTE5IDMyLTEzdDEzIDMydjcxMHE0LTExIDEzLTE5eiIvPjwvc3ZnPg==");
-}
-
-.svg-skip-to-end button,
-button.svg-skip-to-end {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik05NDEgMjU0N3EtMTkgMTktMzIgMTN0LTEzLTMyVjEwNTZxMC0yNiAxMy0zMnQzMiAxM2w3MTAgNzEwcTggOCAxMyAxOXYtNzEwcTAtMjYgMTMtMzJ0MzIgMTNsNzEwIDcxMHE4IDggMTMgMTl2LTY3OHEwLTI2IDE5LTQ1dDQ1LTE5aDEyOHEyNiAwIDQ1IDE5dDE5IDQ1djE0MDhxMCAyNi0xOSA0NXQtNDUgMTloLTEyOHEtMjYgMC00NS0xOXQtMTktNDV2LTY3OHEtNSAxMC0xMyAxOWwtNzEwIDcxMHEtMTkgMTktMzIgMTN0LTEzLTMydi03MTBxLTUgMTAtMTMgMTl6Ii8+PC9zdmc+");
-}
-
-.svg-step-forward button,
-button.svg-step-forward {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNjg4IDE1NjhxMCAyNi0xOSA0NWwtNTEyIDUxMnEtMTkgMTktNDUgMTl0LTQ1LTE5cS0xOS0xOS0xOS00NXYtMjU2aC0yMjRxLTk4IDAtMTc1LjUgNnQtMTU0IDIxLjVxLTc2LjUgMTUuNS0xMzMgNDIuNXQtMTA1LjUgNjkuNXEtNDkgNDIuNS04MCAxMDF0LTQ4LjUgMTM4LjVxLTE3LjUgODAtMTcuNSAxODEgMCA1NSA1IDEyMyAwIDYgMi41IDIzLjV0Mi41IDI2LjVxMCAxNS04LjUgMjV0LTIzLjUgMTBxLTE2IDAtMjgtMTctNy05LTEzLTIydC0xMy41LTMwcS03LjUtMTctMTAuNS0yNC0xMjctMjg1LTEyNy00NTEgMC0xOTkgNTMtMzMzIDE2Mi00MDMgODc1LTQwM2gyMjR2LTI1NnEwLTI2IDE5LTQ1dDQ1LTE5cTI2IDAgNDUgMTlsNTEyIDUxMnExOSAxOSAxOSA0NXoiLz48L3N2Zz4=");
-}
-
-.svg-step-backward button,
-button.svg-step-backward {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNjg4IDIwNDhxMCAxNjYtMTI3IDQ1MS0zIDctMTAuNSAyNHQtMTMuNSAzMHEtNiAxMy0xMyAyMi0xMiAxNy0yOCAxNy0xNSAwLTIzLjUtMTB0LTguNS0yNXEwLTkgMi41LTI2LjV0Mi41LTIzLjVxNS02OCA1LTEyMyAwLTEwMS0xNy41LTE4MXQtNDguNS0xMzguNXEtMzEtNTguNS04MC0xMDF0LTEwNS41LTY5LjVxLTU2LjUtMjctMTMzLTQyLjV0LTE1NC0yMS41cS03Ny41LTYtMTc1LjUtNmgtMjI0djI1NnEwIDI2LTE5IDQ1dC00NSAxOXEtMjYgMC00NS0xOWwtNTEyLTUxMnEtMTktMTktMTktNDV0MTktNDVsNTEyLTUxMnExOS0xOSA0NS0xOXQ0NSAxOXExOSAxOSAxOSA0NXYyNTZoMjI0cTcxMyAwIDg3NSA0MDMgNTMgMTM0IDUzIDMzM3oiLz48L3N2Zz4=");
-}
-
-.svg-pause button,
-button.svg-pause {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNTYwIDEwODh2MTQwOHEwIDI2LTE5IDQ1dC00NSAxOWgtNTEycS0yNiAwLTQ1LTE5dC0xOS00NVYxMDg4cTAtMjYgMTktNDV0NDUtMTloNTEycTI2IDAgNDUgMTl0MTkgNDV6bS04OTYgMHYxNDA4cTAgMjYtMTkgNDV0LTQ1IDE5aC01MTJxLTI2IDAtNDUtMTl0LTE5LTQ1VjEwODhxMC0yNiAxOS00NXQ0NS0xOWg1MTJxMjYgMCA0NSAxOXQxOSA0NXoiLz48L3N2Zz4=");
-}
-
-.svg-play button,
-button.svg-play {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNDcyLjUgMTgyM2wtMTMyOCA3MzhxLTIzIDEzLTM5LjUgM3QtMTYuNS0zNlYxMDU2cTAtMjYgMTYuNS0zNnQzOS41IDNsMTMyOCA3MzhxMjMgMTMgMjMgMzF0LTIzIDMxeiIvPjwvc3ZnPg==");
-}
-
-.svg-enter-fullscreen button,
-button.svg-enter-fullscreen {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgd2lkdGg9IjI4Ij48cGF0aCBkPSJNMiAyaDI0djI0SDJ6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTZIN3Y1aDV2LTJIOXYtM3ptLTItNGgyVjloM1Y3SDd2NXptMTIgN2gtM3YyaDV2LTVoLTJ2M3pNMTYgN3YyaDN2M2gyVjdoLTV6Ii8+PC9zdmc+");
-}
-
-.svg-exit-fullscreen button,
-button.svg-exit-fullscreen {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgd2lkdGg9IjI4Ij48cGF0aCBkPSJNMiAyaDI0djI0SDJ6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTcgMThoM3YzaDJ2LTVIN3Yyem0zLThIN3YyaDVWN2gtMnYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjdoLTJ2NWg1di0yaC0zeiIvPjwvc3ZnPg==");
-}
-
-.svg-twizzle-tw button,
-button.svg-twizzle-tw {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODY0IiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzk3LjU4MSAxNTEuMTh2NTcuMDg0aC04OS43MDN2MjQwLjM1MmgtNjYuOTU1VjIwOC4yNjRIMTUxLjIydi01Ny4wODNoMjQ2LjM2MXptNTQuMzEgNzEuNjc3bDcuNTEyIDMzLjY5MmMyLjcxOCAxMi4xNiA1LjU4IDI0LjY4IDguNTg0IDM3LjU1NWEyMTgwLjc3NSAyMTgwLjc3NSAwIDAwOS40NDIgMzguODQzIDEyNjYuMyAxMjY2LjMgMCAwMDEwLjA4NiAzNy41NTVjMy43Mi0xMi41OSA3LjM2OC0yNS40NjYgMTAuOTQ1LTM4LjYyOCAzLjU3Ni0xMy4xNjIgNy4wMS0yNi4xMSAxMC4zLTM4Ljg0M2w1Ljc2OS0yMi40NTZjMS4yNDgtNC44ODcgMi40NzItOS43MDUgMy42NzQtMTQuNDU1IDMuMDA0LTExLjg3NSA1LjY1MS0yMi45NjIgNy45NC0zMy4yNjNoNDYuMzU0bDIuMzg0IDEwLjU2M2EyMDAwLjc3IDIwMDAuNzcgMCAwMDMuOTM1IDE2LjgyOGw2LjcxMSAyNy43MWMxLjIxMyA0Ljk1NiAyLjQ1IDkuOTggMy43MDkgMTUuMDczYTMxMTkuNzc3IDMxMTkuNzc3IDAgMDA5Ljg3MSAzOC44NDMgMTI0OS4yMjcgMTI0OS4yMjcgMCAwMDEwLjczIDM4LjYyOCAxOTA3LjYwNSAxOTA3LjYwNSAwIDAwMTAuMzAxLTM3LjU1NSAxMzk3Ljk0IDEzOTcuOTQgMCAwMDkuNjU3LTM4Ljg0M2w0LjQtMTkuMDQ2Yy43MTUtMy4xMyAxLjQyMS02LjIzNiAyLjExOC05LjMyMWw5LjU3Ny00Mi44OGg2Ni41MjZhMjk4OC43MTggMjk4OC43MTggMCAwMS0xOS41MjkgNjYuMzExbC01LjcyOCAxOC40ODJhMzIzNy40NiAzMjM3LjQ2IDAgMDEtMTQuMDE1IDQzLjc1MmMtNi40MzggMTkuNi0xMi43MzMgMzcuNjk4LTE4Ljg4NSA1NC4yOTRsLTMuMzA2IDguODI1Yy00Ljg4NCAxMi44OTgtOS40MzMgMjQuMjYzLTEzLjY0NyAzNC4wOTVoLTQ5Ljc4N2E4NDE3LjI4OSA4NDE3LjI4OSAwIDAxLTIxLjAzMS02NC44MDkgMTI4OC42ODYgMTI4OC42ODYgMCAwMS0xOC44ODUtNjQuODEgMTk3Mi40NDQgMTk3Mi40NDQgMCAwMS0xOC4yNCA2NC44MSAyNTc5LjQxMiAyNTc5LjQxMiAwIDAxLTIwLjM4OCA2NC44MWgtNDkuNzg3Yy00LjY4Mi0xMC45MjYtOS43Mi0yMy43NDMtMTUuMTEtMzguNDUxbC0xLjYyOS00LjQ3Yy01LjI1OC0xNC41MjEtMTAuNjgtMzAuMTkyLTE2LjI2Ni00Ny4wMTRsLTIuNDA0LTcuMjhjLTYuNDM4LTE5LjYtMTMuMDItNDAuMzQ0LTE5Ljc0My02Mi4yMzRhMjk4OC43MDcgMjk4OC43MDcgMCAwMS0xOS41MjktNjYuMzExaDY3LjM4NXoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==");
-}
-`);
-
-// Sized against full-screen dimensions.
-// button.svg-twizzle-tw {
-//   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzc3IiBoZWlnaHQ9IjUxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzU0LjU4MSAxMDcuMTh2NTcuMDg0aC04OS43MDN2MjQwLjM1MmgtNjYuOTU1VjE2NC4yNjRIMTA4LjIydi01Ny4wODNoMjQ2LjM2MXptNTQuMzEgNzEuNjc3bDcuNTEyIDMzLjY5MmMyLjcxOCAxMi4xNiA1LjU4IDI0LjY4IDguNTg0IDM3LjU1NWEyMTgwLjc3NSAyMTgwLjc3NSAwIDAwOS40NDIgMzguODQzIDEyNjYuMyAxMjY2LjMgMCAwMDEwLjA4NiAzNy41NTVjMy43Mi0xMi41OSA3LjM2OC0yNS40NjYgMTAuOTQ1LTM4LjYyOCAzLjU3Ni0xMy4xNjIgNy4wMS0yNi4xMSAxMC4zLTM4Ljg0M2w1Ljc2OS0yMi40NTZjMS4yNDgtNC44ODcgMi40NzItOS43MDUgMy42NzQtMTQuNDU1IDMuMDA0LTExLjg3NSA1LjY1MS0yMi45NjIgNy45NC0zMy4yNjNoNDYuMzU0bDIuMzg0IDEwLjU2M2EyMDAwLjc3IDIwMDAuNzcgMCAwMDMuOTM1IDE2LjgyOGw2LjcxMSAyNy43MWMxLjIxMyA0Ljk1NiAyLjQ1IDkuOTggMy43MDkgMTUuMDczYTMxMTkuNzc3IDMxMTkuNzc3IDAgMDA5Ljg3MSAzOC44NDMgMTI0OS4yMjcgMTI0OS4yMjcgMCAwMDEwLjczIDM4LjYyOCAxOTA3LjYwNSAxOTA3LjYwNSAwIDAwMTAuMzAxLTM3LjU1NSAxMzk3Ljk0IDEzOTcuOTQgMCAwMDkuNjU3LTM4Ljg0M2w0LjQtMTkuMDQ2Yy43MTUtMy4xMyAxLjQyMS02LjIzNiAyLjExOC05LjMyMWw5LjU3Ny00Mi44OGg2Ni41MjZhMjk4OC43MTggMjk4OC43MTggMCAwMS0xOS41MjkgNjYuMzExbC01LjcyOCAxOC40ODJhMzIzNy40NiAzMjM3LjQ2IDAgMDEtMTQuMDE1IDQzLjc1MmMtNi40MzggMTkuNi0xMi43MzMgMzcuNjk4LTE4Ljg4NSA1NC4yOTRsLTMuMzA2IDguODI1Yy00Ljg4NCAxMi44OTgtOS40MzMgMjQuMjYzLTEzLjY0NyAzNC4wOTVoLTQ5Ljc4N2E4NDE3LjI4OSA4NDE3LjI4OSAwIDAxLTIxLjAzMS02NC44MDkgMTI4OC42ODYgMTI4OC42ODYgMCAwMS0xOC44ODUtNjQuODEgMTk3Mi40NDQgMTk3Mi40NDQgMCAwMS0xOC4yNCA2NC44MSAyNTc5LjQxMiAyNTc5LjQxMiAwIDAxLTIwLjM4OCA2NC44MWgtNDkuNzg3Yy00LjY4Mi0xMC45MjYtOS43Mi0yMy43NDMtMTUuMTEtMzguNDUxbC0xLjYyOS00LjQ3Yy01LjI1OC0xNC41MjEtMTAuNjgtMzAuMTkyLTE2LjI2Ni00Ny4wMTRsLTIuNDA0LTcuMjhjLTYuNDM4LTE5LjYtMTMuMDItNDAuMzQ0LTE5Ljc0My02Mi4yMzRhMjk4OC43MDcgMjk4OC43MDcgMCAwMS0xOS41MjktNjYuMzExaDY3LjM4NXoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==");
-// }