Prettier

packages/skin-database/data/ArchiveFileModel.ts

@@ -64,7 +64,7 @@ export default class ArchiveFileModel {
     if (info == null) {
       return null;
     }
-    console.log("info", info)
+    console.log("info", info);
     return info.getTextContent();
   }
 

packages/skin-database/data/FileInfoModel.ts

@@ -8,7 +8,7 @@ export type FileInfoDebugData = {
 };
 
 export default class FileInfoModel {
-  constructor(readonly ctx: UserContext, readonly row: FileInfoRow) { }
+  constructor(readonly ctx: UserContext, readonly row: FileInfoRow) {}
 
   static async fromFileMd5(
     ctx: UserContext,
@@ -27,7 +27,7 @@ export default class FileInfoModel {
   }
 
   getTextContent(): string | null {
-    console.log("row", this.row)
+    console.log("row", this.row);
     return this.row.text_content;
   }
 

packages/skin-database/data/SkinModel.ts

@@ -26,7 +26,7 @@ export const IS_NOT_README =
   /(genex\.txt)|(genexinfo\.txt)|(gen_gslyrics\.txt)|(region\.txt)|(pledit\.txt)|(viscolor\.txt)|(winampmb\.txt)|("gen_ex help\.txt)|(mbinner\.txt)$/i;
 
 export default class SkinModel {
-  constructor(readonly ctx: UserContext, readonly row: SkinRow) { }
+  constructor(readonly ctx: UserContext, readonly row: SkinRow) {}
 
   static async fromMd5(
     ctx: UserContext,
@@ -195,7 +195,7 @@ export default class SkinModel {
     if (readme == null) {
       return null;
     }
-    console.log("readme", readme)
+    console.log("readme", readme);
     return readme.getTextContent();
   }
 

packages/skin-database/discord-bot/utils.ts

@@ -44,7 +44,7 @@ export async function postSkin({
     return;
   }
   const readmeText = await skin.getReadme();
-  console.log("readmeText", readmeText)
+  console.log("readmeText", readmeText);
   const tweet = await skin.getTweet();
   const tweetStatus = await skin.getTweetStatus();
   const iaItem = await skin.getIaItem();

packages/skin-database/tasks/syncToArchive.ts

@@ -170,7 +170,9 @@ export async function identifierExists(identifier: string): Promise<boolean> {
 
 async function getNewIdentifier(filename: string): Promise<string> {
   // The internet archvie has a max identifier length of 80 chars.
-  const identifierBase = `winampskins_${sanitize(path.parse(filename).name)}`.slice(0, 76);
+  const identifierBase = `winampskins_${sanitize(
+    path.parse(filename).name
+  )}`.slice(0, 76);
   let counter = 0;
   function getIdentifier() {
     return identifierBase + (counter === 0 ? "" : `_${counter}`);
@@ -230,7 +232,7 @@ export async function syncToArchive(handler: DiscordEventHandler) {
         errorCount++;
         // The internet archive claims this one is corrupt for some reason.
         if (md5 === "513fdd06bf39391e52f3ac5b233dd147") {
-          console.warn(`This skin is known to not upload correctly.`)
+          console.warn(`This skin is known to not upload correctly.`);
         }
         if (/error checking archive/.test(e.message)) {
           console.log(`Corrupt archvie: ${skin.getMd5()}`);

packages/webamp-modern/snowpack.config.js

@@ -8,9 +8,7 @@ module.exports = {
     src: "/",
     assets: "/assets",
   },
-  exclude: [
-    '*.tmp'
-  ],
+  exclude: ["*.tmp"],
   plugins: [
     /* ... */
   ],
@@ -22,6 +20,6 @@ module.exports = {
   },
   buildOptions: {
     /* ... */
-    out: './build'
+    out: "./build",
   },
 };

packages/webamp-modern/src/skin/BitmapFont.ts

@@ -83,5 +83,4 @@ export default class BitmapFont extends Bitmap {
   setExternalBitmap(isExternal: boolean) {
     this._externalBitmap = isExternal;
   }
-
 }

packages/webamp-modern/src/skin/Clippath.ts

@@ -4,7 +4,11 @@ export class Edges {
   _bottom: string[] = [];
   _left: string[] = [];
 
-  parseCanvasTransparency(canvas: HTMLCanvasElement, preferedWidth:number, preferedHeight:number) {
+  parseCanvasTransparency(
+    canvas: HTMLCanvasElement,
+    preferedWidth: number,
+    preferedHeight: number
+  ) {
     const w = preferedWidth || canvas.width;
     const h = preferedHeight || canvas.height;
     const ctx = canvas.getContext("2d");

packages/webamp-modern/src/skin/ColorThemesList.ts

@@ -94,24 +94,24 @@ export default class ColorThemesList extends GuiObj {
         }
         return true;
       case "colorthemes_previous":
-        if(this._select.selectedIndex > 0) {
+        if (this._select.selectedIndex > 0) {
           this._select.selectedIndex--;
-          return this.handleAction('colorthemes_switch')
+          return this.handleAction("colorthemes_switch");
         }
-        break
+        break;
       case "colorthemes_next":
-        if(this._select.selectedIndex < this._select.options.length) {
+        if (this._select.selectedIndex < this._select.options.length) {
           this._select.selectedIndex++;
-          return this.handleAction('colorthemes_switch')
+          return this.handleAction("colorthemes_switch");
         }
-        break
+        break;
     }
     return false;
   }
 
   draw() {
     super.draw();
-    this._div.classList.add('list');
+    this._div.classList.add("list");
     this._div.setAttribute("data-obj-name", "ColorThemes:List");
     this._renderGammaSets();
   }

packages/webamp-modern/src/skin/Cursor.ts

@@ -1,8 +1,8 @@
 // We use a bitmask to encode the possible combinations of cursor attributes as a single number.
 // https://en.wikipedia.org/wiki/Mask_(computing)
-export const LEFT   = 1 << 1;
-export const RIGHT  = 1 << 2;
-export const TOP    = 1 << 3;
+export const LEFT = 1 << 1;
+export const RIGHT = 1 << 2;
+export const TOP = 1 << 3;
 export const BOTTOM = 1 << 4;
-export const MOVE   = 1 << 0 | TOP | LEFT;
-export const CURSOR = 1 << 31;
+export const MOVE = (1 << 0) | TOP | LEFT;
+export const CURSOR = 1 << 31;

packages/webamp-modern/src/skin/ImageManager.ts

@@ -36,8 +36,8 @@ export default class ImageManager {
     this._bitmaps[id] = bitmap;
   }
 
-  isFilePathAdded(filePath:string) {
-    return Object.keys(this._pathofBitmap).includes(filePath)    
+  isFilePathAdded(filePath: string) {
+    return Object.keys(this._pathofBitmap).includes(filePath);
   }
 
   // Ensure we've loaded the image into our image loader.

packages/webamp-modern/src/skin/PrivateConfig.ts

@@ -7,9 +7,9 @@ class PrivateConfig {
     }
     return this._sections.get(section);
   }
-  getPrivateInt(section: string, item: string, defvalue: number):number {
-    const value:string = this._getSection(section).get(item);
-    return value? parseInt(value) : defvalue ;
+  getPrivateInt(section: string, item: string, defvalue: number): number {
+    const value: string = this._getSection(section).get(item);
+    return value ? parseInt(value) : defvalue;
   }
 
   setPrivateInt(section: string, item: string, value: number) {
@@ -19,8 +19,6 @@ class PrivateConfig {
   getPrivateString(section: string, item: string, defvalue: string): string {
     return this._getSection(section).get(item) ?? defvalue;
   }
-
-
 }
 
 const PRIVATE_CONFIG = new PrivateConfig();

packages/webamp-modern/src/skin/VM.ts

@@ -18,11 +18,11 @@ export default class Vm {
         ) {
           const reversedArgs = [...args].reverse();
           this.interpret(script, binding.commandOffset, reversedArgs);
-          return 1
+          return 1;
         }
       }
     }
-    return 0
+    return 0;
   }
 
   addScript(maki: ParsedMaki): number {

packages/webamp-modern/src/skin/makiClasses/AnimatedLayer.ts

@@ -68,7 +68,7 @@ export default class AnimatedLayer extends Layer {
     this.gotoframe(frame);
     UI_ROOT.vm.dispatch(this, "onplay");
     if (frame === end) {
-      this.stop()
+      this.stop();
       return;
     }
     this._animationInterval = setInterval(() => {
@@ -77,7 +77,7 @@ export default class AnimatedLayer extends Layer {
       if (frame === end) {
         clearInterval(this._animationInterval);
         this._animationInterval = null;
-        this.stop()
+        this.stop();
       }
     }, this._speed);
   }

packages/webamp-modern/src/skin/makiClasses/Button.ts

@@ -107,7 +107,7 @@ export default class Button extends GuiObj {
     }
   }
 
-  setactivatednocallback(onoff: boolean){
+  setactivatednocallback(onoff: boolean) {
     if (onoff !== this._active) {
       this._active = onoff;
       if (this._active) {

packages/webamp-modern/src/skin/makiClasses/ComponentBucket.ts

@@ -90,10 +90,11 @@ export default class ComponentBucket extends Group {
     for (const obj of this.getparent()._children) {
       if (
         obj instanceof Button &&
-        (obj._actionTarget == null || obj._actionTarget == "bucket") && 
-        (obj._action && obj._action.startsWith('cb_'))
+        (obj._actionTarget == null || obj._actionTarget == "bucket") &&
+        obj._action &&
+        obj._action.startsWith("cb_")
       ) {
-        obj._actionTarget = this.getId()
+        obj._actionTarget = this.getId();
       }
     }
   }
@@ -103,7 +104,9 @@ export default class ComponentBucket extends Group {
     const oneChild = this._children[0];
     const oneStep = this._vertical ? oneChild.getheight() : oneChild.getwidth();
     const anchor = this._vertical ? "top" : "left";
-    const currentStep = this._vertical? this._wrapper.offsetTop : this._wrapper.offsetLeft;
+    const currentStep = this._vertical
+      ? this._wrapper.offsetTop
+      : this._wrapper.offsetLeft;
     //TODO: Clamp to not over top nor over left (showing empty space bug)
     this._wrapper.style.setProperty(anchor, px(currentStep + oneStep * step));
   }

packages/webamp-modern/src/skin/makiClasses/ConfigAttribute.ts

@@ -1,26 +1,26 @@
 // import XmlObj from "../XmlObj";
 
-export default class ConfigAttribute  {
+export default class ConfigAttribute {
   static GUID = "24dec2834a36b76e249ecc8c736c6bc4";
-  _name : string;
+  _name: string;
   _default: string;
   _value: string;
 
-  constructor(name:string, defaultValue: string) {
-//   constructor() {
+  constructor(name: string, defaultValue: string) {
+    //   constructor() {
     // super();
     this._name = name;
     this._default = defaultValue;
     // this._value = ''
   }
-  getdata():string{
+  getdata(): string {
     //   return '';
-      return this._value || this._default || '';
+    return this._value || this._default || "";
   }
-  setdata(value:string){
-      this._value = value;
+  setdata(value: string) {
+    this._value = value;
   }
-  ondatachanged(){
+  ondatachanged() {
     //   this._value = value;
   }
 }

packages/webamp-modern/src/skin/makiClasses/Container.ts

@@ -69,13 +69,13 @@ export default class Container extends XmlObj {
 
   resolveAlias() {
     const knownContainerGuids = {
-      "{0000000a-000c-0010-ff7b-01014263450c}": "vis",  // visualization
-      "{45f3f7c1-a6f3-4ee6-a15e-125e92fc3f8d}": "pl",   // playlist editor
-      "{6b0edf80-c9a5-11d3-9f26-00c04f39ffc6}": "ml",   // media library
-      "{7383a6fb-1d01-413b-a99a-7e6f655f4591}": "con",  // config?
-      "{7a8b2d76-9531-43b9-91a1-ac455a7c8242}": "lir",  // lyric?
-      "{a3ef47bd-39eb-435a-9fb3-a5d87f6f17a5}": "dl",   // download??
-      "{f0816d7b-fffc-4343-80f2-e8199aa15cc3}": "video",// independent video window
+      "{0000000a-000c-0010-ff7b-01014263450c}": "vis", // visualization
+      "{45f3f7c1-a6f3-4ee6-a15e-125e92fc3f8d}": "pl", // playlist editor
+      "{6b0edf80-c9a5-11d3-9f26-00c04f39ffc6}": "ml", // media library
+      "{7383a6fb-1d01-413b-a99a-7e6f655f4591}": "con", // config?
+      "{7a8b2d76-9531-43b9-91a1-ac455a7c8242}": "lir", // lyric?
+      "{a3ef47bd-39eb-435a-9fb3-a5d87f6f17a5}": "dl", // download??
+      "{f0816d7b-fffc-4343-80f2-e8199aa15cc3}": "video", // independent video window
     };
     const guid = this._componentGuid;
     this._componentAlias = knownContainerGuids[guid];
@@ -163,15 +163,13 @@ export default class Container extends XmlObj {
     throw new Error(`Could not find a container with the id; "${layoutId}"`);
   }
 
-  /** 
-  * @ret Layout
-  */
+  /**
+   * @ret Layout
+   */
   getCurLayout(): Layout {
     return this._activeLayout;
   }
 
-
-
   addLayout(layout: Layout) {
     layout.setParent(this as unknown as Group);
     this._layouts.push(layout);
@@ -182,7 +180,7 @@ export default class Container extends XmlObj {
 
   // parser need it.
   addChild(layout: Layout) {
-    this.addLayout(layout)
+    this.addLayout(layout);
   }
 
   _clearCurrentLayout() {

packages/webamp-modern/src/skin/makiClasses/Grid.ts

@@ -4,22 +4,22 @@ import { px } from "../../utils";
 
 // http://wiki.winamp.com/wiki/XML_GUI_Objects
 export default class Grid extends GuiObj {
-//   static GUID = "5ab9fa1545579a7d5765c8aba97cc6a6";
+  //   static GUID = "5ab9fa1545579a7d5765c8aba97cc6a6";
   _image: string; // link to Bitmap._id
-  _left  : HTMLElement; 
+  _left: HTMLElement;
   _middle: HTMLElement;
-  _right : HTMLElement;
+  _right: HTMLElement;
 
-  constructor(){
-      super();
-      this._left = document.createElement('left');
-      this._middle = document.createElement('middle');
-      this._right = document.createElement('right');
-      this._div.appendChild(this._left)
-      this._div.appendChild(this._middle)
-      this._div.appendChild(this._right)
+  constructor() {
+    super();
+    this._left = document.createElement("left");
+    this._middle = document.createElement("middle");
+    this._right = document.createElement("right");
+    this._div.appendChild(this._left);
+    this._div.appendChild(this._middle);
+    this._div.appendChild(this._right);
   }
-  
+
   setXmlAttr(key: string, value: string): boolean {
     if (super.setXmlAttr(key, value)) {
       return true;
@@ -49,7 +49,7 @@ export default class Grid extends GuiObj {
     }
     if (this._image != null) {
       const bitmap = UI_ROOT.getBitmap(this._image);
-      if(bitmap) return bitmap.getHeight();
+      if (bitmap) return bitmap.getHeight();
     }
     return super.getheight();
   }
@@ -61,7 +61,7 @@ export default class Grid extends GuiObj {
     }
     if (this._image != null) {
       const bitmap = UI_ROOT.getBitmap(this._image);
-      if(bitmap) return bitmap.getWidth();
+      if (bitmap) return bitmap.getWidth();
     }
     return super.getwidth();
   }
@@ -74,9 +74,9 @@ export default class Grid extends GuiObj {
   _setBitmap(element: HTMLElement, bitmap_id: string) {
     const bitmap = UI_ROOT.getBitmap(bitmap_id);
     // this.setBackgroundImage(bitmap);
-    if(bitmap){
-        bitmap.setAsBackground(element);
-        element.style.width = px(bitmap.getWidth());
+    if (bitmap) {
+      bitmap.setAsBackground(element);
+      element.style.width = px(bitmap.getWidth());
     }
   }
 
@@ -84,7 +84,7 @@ export default class Grid extends GuiObj {
     super.draw();
     // this._div.setAttribute("data-obj-name", "Layer");
     // this._div.style.pointerEvents = this._sysregion==-2 || this._ghost? 'none' : 'auto';
-    this._div.style.pointerEvents = 'none';
+    this._div.style.pointerEvents = "none";
     // this._div.style.overflow = "hidden";
     this._div.style.removeProperty("display");
     this._div.classList.add("webamp--img");
@@ -92,7 +92,7 @@ export default class Grid extends GuiObj {
   }
   //setRegionFromMap(regionMap:Map, threshold:number)
 
-  isinvalid():boolean {
+  isinvalid(): boolean {
     return false;
   }
 }

packages/webamp-modern/src/skin/makiClasses/GroupXFade.ts

@@ -40,17 +40,17 @@ export default class GroupXFade extends Group {
     actionTarget: string | null = null,
     source: GuiObj = null
   ): boolean {
-    if(action.toLowerCase().startsWith('switchto;')){
-        UI_ROOT.vm.dispatch(this, 'onaction', [
-          { type: "STRING", value: action },
-          { type: "STRING", value: param },
-          { type: "INT", value: 0 },
-          { type: "INT", value: 0 },
-          { type: "INT", value: 0 },
-          { type: "INT", value: 0 },
-          { type: "OBJECT", value: source },
-        ])
-        return true
+    if (action.toLowerCase().startsWith("switchto;")) {
+      UI_ROOT.vm.dispatch(this, "onaction", [
+        { type: "STRING", value: action },
+        { type: "STRING", value: param },
+        { type: "INT", value: 0 },
+        { type: "INT", value: 0 },
+        { type: "INT", value: 0 },
+        { type: "INT", value: 0 },
+        { type: "OBJECT", value: source },
+      ]);
+      return true;
     }
     switch (action.toLowerCase()) {
       case "groupid":

packages/webamp-modern/src/skin/makiClasses/GuiObj.ts

@@ -229,7 +229,7 @@ export default class GuiObj extends XmlObj {
   }
 
   getId(): string {
-    return this._id || '';
+    return this._id || "";
   }
 
   /**
@@ -412,7 +412,7 @@ export default class GuiObj extends XmlObj {
     return this._div.matches(":focus");
   }
 
-  setregion(reg: Region){
+  setregion(reg: Region) {
     //TODO:
   }
 
@@ -446,7 +446,7 @@ export default class GuiObj extends XmlObj {
       y >= this.gettop(),
       "Expected click to be below the component's top"
     );
-    this.getparentlayout().bringtofront()
+    this.getparentlayout().bringtofront();
     UI_ROOT.vm.dispatch(this, "onleftbuttondown", [
       { type: "INT", value: x },
       { type: "INT", value: y },
@@ -746,7 +746,7 @@ export default class GuiObj extends XmlObj {
     this._div.style.zIndex = String(BRING_LEAST);
   }
 
-  setenabled(onoff:boolean|number){
+  setenabled(onoff: boolean | number) {
     //TODO:
   }
 
@@ -778,7 +778,7 @@ export default class GuiObj extends XmlObj {
     x: number,
     y: number,
     p1: number,
-    p2: number,
+    p2: number
   ): number {
     return UI_ROOT.vm.dispatch(this, "onaction", [
       { type: "STRING", value: action },

packages/webamp-modern/src/skin/makiClasses/Layer.ts

@@ -34,7 +34,7 @@ export default class Layer extends Movable {
     }
     if (this._image != null) {
       const bitmap = UI_ROOT.getBitmap(this._image);
-      if(bitmap) return bitmap.getHeight();
+      if (bitmap) return bitmap.getHeight();
     }
     return super.getheight();
   }
@@ -46,7 +46,7 @@ export default class Layer extends Movable {
     }
     if (this._image != null) {
       const bitmap = UI_ROOT.getBitmap(this._image);
-      if(bitmap) return bitmap.getWidth();
+      if (bitmap) return bitmap.getWidth();
     }
     return super.getwidth();
   }

packages/webamp-modern/src/skin/makiClasses/LayoutStatus.ts

@@ -1,7 +1,7 @@
 import GuiObj from "./GuiObj";
 
 // Maybe this?
-// http://wiki.winamp.com/wiki/ 
+// http://wiki.winamp.com/wiki/
 export default class LayoutStatus extends GuiObj {
   static GUID = "7fd5f21048dfacc45154a0a676dc6c57";
 
@@ -16,7 +16,7 @@ export default class LayoutStatus extends GuiObj {
     return true;
   }
 
-  callme(str: string){
-    console.log('callme:', str)
+  callme(str: string) {
+    console.log("callme:", str);
   }
 }

packages/webamp-modern/src/skin/makiClasses/MakiMap.ts

@@ -6,7 +6,7 @@ import Bitmap from "../Bitmap";
 export default class MakiMap extends BaseObject {
   static GUID = "3860366542a7461b3fd875aa73bf6766";
   _bitmap: Bitmap;
-  
+
   loadmap(bitmapId: string) {
     this._bitmap = UI_ROOT.getBitmap(bitmapId);
   }

packages/webamp-modern/src/skin/makiClasses/MapObj.ts

@@ -11,7 +11,7 @@ import XmlObj from "../XmlObj";
 // -- http://wiki.winamp.com/wiki/Modern_Skin
 export default class MapObj extends XmlObj {
   static GUID = "38603665461B42a7AA75D83F6667BF73";
-  
+
   _layouts: Layout[] = [];
   _activeLayout: Layout | null = null;
   _visible: boolean = true;
@@ -41,5 +41,4 @@ export default class MapObj extends XmlObj {
     }
     return true;
   }
-
 }

packages/webamp-modern/src/skin/makiClasses/PlayListGui.ts

@@ -74,7 +74,7 @@ export default class PlayListGui extends Group {
         UI_ROOT.audio.play();
         this.refresh();
       });
-      line.textContent = `${i+1}. ${pl.gettitle(i)}`;
+      line.textContent = `${i + 1}. ${pl.gettitle(i)}`;
       this._contentPanel.appendChild(line);
     }
   };

packages/webamp-modern/src/skin/makiClasses/ProgressGrid.ts

@@ -4,18 +4,18 @@ import { px } from "../../utils";
 
 // http://wiki.winamp.com/wiki/XML_GUI_Objects
 export default class ProgressGrid extends Grid {
-//   static GUID = "5ab9fa1545579a7d5765c8aba97cc6a6";
-_disposeDisplaySubscription: () => void | null = null;
+  //   static GUID = "5ab9fa1545579a7d5765c8aba97cc6a6";
+  _disposeDisplaySubscription: () => void | null = null;
 
-  constructor(){
-      super();
-      this._disposeDisplaySubscription = UI_ROOT.audio.onCurrentTimeChange(
-        () => {
-            this._middle.style.width = `${UI_ROOT.audio.getCurrentTimePercent()*100}%`;
-        }
-      );
+  constructor() {
+    super();
+    this._disposeDisplaySubscription = UI_ROOT.audio.onCurrentTimeChange(() => {
+      this._middle.style.width = `${
+        UI_ROOT.audio.getCurrentTimePercent() * 100
+      }%`;
+    });
   }
-  
+
   setXmlAttr(key: string, value: string): boolean {
     if (super.setXmlAttr(key, value)) {
       return true;
@@ -30,8 +30,7 @@ _disposeDisplaySubscription: () => void | null = null;
   }
 
   draw() {
-      super.draw()
-      this._div.style.removeProperty('display')
+    super.draw();
+    this._div.style.removeProperty("display");
   }
-
 }

packages/webamp-modern/src/skin/makiClasses/Region.ts

@@ -3,8 +3,7 @@ import MakiMap from "./MakiMap";
 export default class Region {
   static GUID = "3a370c02439f3cbf8886f184361ecf5b";
 
-  loadfrommap(regionmap: MakiMap, threshold: number, reversed:boolean){
+  loadfrommap(regionmap: MakiMap, threshold: number, reversed: boolean) {
     // TODO:
   }
-  
 }

packages/webamp-modern/src/skin/makiClasses/Slider.ts

@@ -264,11 +264,11 @@ export default class Slider extends GuiObj {
   }
 
   /**
-   * 
+   *
    * @param newpos 0..MAX
    */
   setposition(newpos: number) {
-    this._position= newpos / MAX;
+    this._position = newpos / MAX;
     this._renderThumbPosition();
     this.doSetPosition(this.getposition());
     // console.log("Slider.setPosition:", newpos);
@@ -358,7 +358,7 @@ export default class Slider extends GuiObj {
       this._div.style.setProperty("--thumb-left", px(left));
     }
   }
-  
+
   draw() {
     super.draw();
     this._div.setAttribute("data-obj-name", "Slider");

packages/webamp-modern/src/skin/makiClasses/Status.ts

@@ -70,7 +70,7 @@ export default class Status extends GuiObj {
   }
 
   _renderBackground() {
-    let bitmap_id:string;
+    let bitmap_id: string;
     switch (this._state) {
       case AUDIO_PLAYING:
         bitmap_id = this._playbitmap;

packages/webamp-modern/src/skin/makiClasses/Text.ts

@@ -322,7 +322,10 @@ offsety - (int) Extra pixels to be added to or subtracted from the calculated x
         this._div.style.removeProperty("--align");
       }
       //? margin
-      this._div.style.setProperty("--hspacing", px(font.getHorizontalSpacing()));
+      this._div.style.setProperty(
+        "--hspacing",
+        px(font.getHorizontalSpacing())
+      );
 
       this.setBackgroundImage(font);
       this._div.style.backgroundSize = "0"; //disable parent background, because only children will use it

packages/webamp-modern/src/skin/makiClasses/Timer.ts

@@ -9,9 +9,9 @@ export default class Timer extends BaseObject {
   _delay: number = 5000; //x2nie
   _timeout: NodeJS.Timeout | null = null;
   _nid: number;
-  _onTimer: ()=>void = null;
+  _onTimer: () => void = null;
 
-  constructor(){
+  constructor() {
     super();
     TIMER_IDS += 1;
     this._nid = TIMER_IDS;
@@ -23,9 +23,9 @@ export default class Timer extends BaseObject {
     //   "Tried to change the delay on a running timer"
     // );
     const running = this.isrunning();
-    if(running) this.stop();
+    if (running) this.stop();
     this._delay = millisec;
-    if(running) this.start()
+    if (running) this.start();
   }
   stop() {
     if (this._timeout != null) {
@@ -35,14 +35,14 @@ export default class Timer extends BaseObject {
   }
   async start(): Promise<boolean> {
     // console.log('timer.start()', this._nid)
-    if(!this._delay){
+    if (!this._delay) {
       return false;
     }
-    const self=this;
+    const self = this;
 
-    try{
+    try {
       assume(this._delay != null, "Tried to start a timer without a delay");
-      if(this.isrunning()){
+      if (this.isrunning()) {
         this.stop();
       }
       this._timeout = setInterval(() => {
@@ -50,27 +50,26 @@ export default class Timer extends BaseObject {
         // UI_ROOT.vm.dispatch(self, "ontimer");
         self.doTimer();
       }, this._delay);
-      return true
-    } 
-    catch(err){
-      return false
+      return true;
+    } catch (err) {
+      return false;
     }
-    return false
+    return false;
   }
 
-  doTimer(){
+  doTimer() {
     // console.log('timer.ontimer()', this._nid)
-    if(this._onTimer!=null){
-      this._onTimer()
+    if (this._onTimer != null) {
+      this._onTimer();
     } else {
-      UI_ROOT.vm.dispatch(this, "ontimer");   
+      UI_ROOT.vm.dispatch(this, "ontimer");
     }
   }
 
-  setOnTimer(callback:()=>void){
-    const handler = ()=>{
+  setOnTimer(callback: () => void) {
+    const handler = () => {
       callback();
-    }
+    };
     this._onTimer = handler;
     // this._onTimer = callback;
   }

packages/webamp-modern/src/skin/makiClasses/ToggleButton.ts

@@ -10,8 +10,8 @@ export default class ToggleButton extends Button {
     return "button";
   }
 
-  getcurcfgval(): number{
-    return this._active? 1 : 0;
+  getcurcfgval(): number {
+    return this._active ? 1 : 0;
   }
 
   /**
@@ -24,12 +24,14 @@ export default class ToggleButton extends Button {
     this.setactivated(!this._active);
   }
 
-  ontoggle(onoff: boolean){
+  ontoggle(onoff: boolean) {
     UI_ROOT.vm.dispatch(this, "ontoggle", [V.newBool(onoff)]);
   }
 
-  onactivate(activated: number){
-    UI_ROOT.vm.dispatch(this, "onactivate", [{type: "INT", value: activated}]);
+  onactivate(activated: number) {
+    UI_ROOT.vm.dispatch(this, "onactivate", [
+      { type: "INT", value: activated },
+    ]);
   }
 
   draw() {

packages/webamp-modern/src/skin/makiClasses/WasabiTitle.ts

@@ -30,21 +30,28 @@ export default class WasabiTitleBar extends Group {
   }
 
   _renderX() {
-    this._div.style.left = this._relatx=='1' ? relative(this._padtitleleft + this._x ?? 0) : px(this._padtitleleft + this._x ?? 0);
+    this._div.style.left =
+      this._relatx == "1"
+        ? relative(this._padtitleleft + this._x ?? 0)
+        : px(this._padtitleleft + this._x ?? 0);
     // this._div.setAttribute('pad-left', this._padtitleleft.toString())
   }
-  
+
   _renderWidth() {
     // this._div.setAttribute('pad-right', this._padtitleright.toString())
     // this._div.setAttribute('_width', this._width.toString())
     // this._div.setAttribute('_width_', this.getwidth().toString())
     // if(this._autowidthsource) return;
-    this._div.style.width = this._relatw=='1' ? relative(-this._padtitleleft + -this._padtitleright + this._width??0) : px(-this._padtitleright + this.getwidth());
+    this._div.style.width =
+      this._relatw == "1"
+        ? relative(
+            -this._padtitleleft + -this._padtitleright + this._width ?? 0
+          )
+        : px(-this._padtitleright + this.getwidth());
   }
 
-
   init() {
-    super.init()
+    super.init();
     UI_ROOT.vm.dispatch(this, "onresize", [
       { type: "INT", value: 0 },
       { type: "INT", value: 0 },
@@ -52,5 +59,4 @@ export default class WasabiTitleBar extends Group {
       { type: "INT", value: this.getheight() },
     ]);
   }
-  
 }

packages/webamp-modern/src/skin/makiClasses/WindowHolder.ts

@@ -10,31 +10,30 @@ import Group from "./Group";
 //
 // -- http://wiki.winamp.com/wiki/Modern_Skin
 export default class WindowHolder extends Group {
-//   static GUID = "38603665461B42a7AA75D83F6667BF73";
-  
+  //   static GUID = "38603665461B42a7AA75D83F6667BF73";
+
   constructor() {
     super();
   }
 
-//   setXmlAttr(_key: string, value: string): boolean {
-//     const key = _key.toLowerCase();
-//     if (super.setXmlAttr(key, value)) {
-//       return true;
-//     }
-//     switch (key) {
-//       case "name":
-//         this._name = value;
-//         break;
-//       case "id":
-//         this._id = value.toLowerCase();
-//         break;
-//       case "default_visible":
-//         this._visible = toBool(value);
-//         break;
-//       default:
-//         return false;
-//     }
-//     return true;
-//   }
-
+  //   setXmlAttr(_key: string, value: string): boolean {
+  //     const key = _key.toLowerCase();
+  //     if (super.setXmlAttr(key, value)) {
+  //       return true;
+  //     }
+  //     switch (key) {
+  //       case "name":
+  //         this._name = value;
+  //         break;
+  //       case "id":
+  //         this._id = value.toLowerCase();
+  //         break;
+  //       case "default_visible":
+  //         this._visible = toBool(value);
+  //         break;
+  //       default:
+  //         return false;
+  //     }
+  //     return true;
+  //   }
 }

packages/webamp-modern/src/skin/parse.ts

@@ -277,7 +277,7 @@ export default class SkinParser {
       case "fadetogglebutton":
       case "configcheckbox":
         //temporary, to localize error
-        return this.dynamicXuiElement(node, parent)
+        return this.dynamicXuiElement(node, parent);
       case "componentbucket":
         return this.componentBucket(node, parent);
       case "playlisteditor":
@@ -377,7 +377,11 @@ export default class SkinParser {
     const xuiEl: XmlElement = this._uiRoot.getXuiElement(xuitag);
     if (xuiEl) {
       const xuiFrame = new XmlElement("dummy", { id: xuiEl.attributes.id });
-      const Element:XuiElement =  await this.newGroup(XuiElement, xuiFrame, parent);
+      const Element: XuiElement = await this.newGroup(
+        XuiElement,
+        xuiFrame,
+        parent
+      );
       Element.setXmlAttributes(node.attributes);
       // await this.maybeApplyGroupDef(frame, xuiFrame);
     }
@@ -838,21 +842,41 @@ export default class SkinParser {
   }
 
   async colorThemesList(node: XmlElement, parent: any) {
-    this.buildWasabiScrollbarDimension()
+    this.buildWasabiScrollbarDimension();
     return this.newGui(ColorThemesList, node, parent);
   }
 
   buildWasabiScrollbarDimension() {
     this._uiRoot.addWidth("vscrollbar-width", "wasabi.scrollbar.vertical.left");
-    this._uiRoot.addHeight("vscrollbar-btn-height", "wasabi.scrollbar.vertical.left");
-    this._uiRoot.addHeight("vscrollbar-thumb-height", "wasabi.scrollbar.vertical.button");
-    this._uiRoot.addHeight("vscrollbar-thumb-height2", "studio.scrollbar.vertical.button");
-
-    this._uiRoot.addHeight("hscrollbar-height", "wasabi.scrollbar.horizontal.left");
-    this._uiRoot.addWidth("hscrollbar-btn-width", "wasabi.scrollbar.horizontal.left");
-    this._uiRoot.addWidth("hscrollbar-thumb-width", "wasabi.scrollbar.horizontal.button");
-    this._uiRoot.addWidth("hscrollbar-thumb-width2", "studio.scrollbar.horizontal.button");
+    this._uiRoot.addHeight(
+      "vscrollbar-btn-height",
+      "wasabi.scrollbar.vertical.left"
+    );
+    this._uiRoot.addHeight(
+      "vscrollbar-thumb-height",
+      "wasabi.scrollbar.vertical.button"
+    );
+    this._uiRoot.addHeight(
+      "vscrollbar-thumb-height2",
+      "studio.scrollbar.vertical.button"
+    );
 
+    this._uiRoot.addHeight(
+      "hscrollbar-height",
+      "wasabi.scrollbar.horizontal.left"
+    );
+    this._uiRoot.addWidth(
+      "hscrollbar-btn-width",
+      "wasabi.scrollbar.horizontal.left"
+    );
+    this._uiRoot.addWidth(
+      "hscrollbar-thumb-width",
+      "wasabi.scrollbar.horizontal.button"
+    );
+    this._uiRoot.addWidth(
+      "hscrollbar-thumb-width2",
+      "studio.scrollbar.horizontal.button"
+    );
   }
 
   async layoutStatus(node: XmlElement, parent: any) {

packages/webamp-modern/src/skin/resolver.ts

@@ -26,12 +26,13 @@ import AlbumArt from "./makiClasses/AlbumArt";
 import Region from "./makiClasses/Region";
 import { PlEdit, PlDir } from "./makiClasses/PlayList";
 
-
 const CLASSES = [
   BaseObject,
   Config,
-  ConfigItem, ConfigAttribute,
-  WinampConfig, WinampConfigGroup,
+  ConfigItem,
+  ConfigAttribute,
+  WinampConfig,
+  WinampConfigGroup,
   ComponentBucket,
   Region,
   AlbumArt,
@@ -51,7 +52,8 @@ const CLASSES = [
   Timer,
   Slider,
   Vis,
-  PlEdit, PlDir,
+  PlEdit,
+  PlDir,
   GuiObj,
 ];
 

packages/webamp-modern/tools/eslint-rules/proper-maki-types.ts

@@ -155,9 +155,9 @@ function makiTypeToTsType(makiType: string): string {
     case "configitem":
       return "ConfigItem";
     case "configattribute":
-      return "ConfigAttribute"
+      return "ConfigAttribute";
     case "winampconfiggroup":
-      return "WinampConfigGroup"
+      return "WinampConfigGroup";
     default:
       throw new Error(`Missing maki type: ${makiType}`);
   }

packages/webamp-modern/tools/extract-object-types.js

@@ -17,7 +17,10 @@ const files = {
 Object.keys(files).forEach((name) => {
   const sourcePath = files[name];
   const types = parser.parseFile(sourcePath);
-  const destinationPath = path.join(__dirname, `../src/maki/objectData/${name}.json`);
+  const destinationPath = path.join(
+    __dirname,
+    `../src/maki/objectData/${name}.json`
+  );
 
   fs.writeFileSync(destinationPath, JSON.stringify(types, null, 2));
 });

packages/webamp-modern/tools/parse-mi.test.js

@@ -8,10 +8,7 @@ import path from "path";
  * This file basically ensures that `yarn extract-object-types` has been run.
  */
 
-const compilers = path.join(
-  __dirname,
-  "../resources/maki_compiler/"
-);
+const compilers = path.join(__dirname, "../resources/maki_compiler/");
 
 const lib566 = path.join(compilers, "v1.2.0 (Winamp 5.66)/lib/");
 

packages/webamp/css/webamp.css

@@ -1,11 +1,11 @@
-@import './base-skin.css';
-@import './context-menu.css';
-@import './equalizer-window.css';
-@import './gen-window.css';
-@import './main-window.css';
-@import './milkdrop-window.css';
-@import './mini-time.css';
-@import './playlist-window.css';
+@import "./base-skin.css";
+@import "./context-menu.css";
+@import "./equalizer-window.css";
+@import "./gen-window.css";
+@import "./main-window.css";
+@import "./milkdrop-window.css";
+@import "./mini-time.css";
+@import "./playlist-window.css";
 /* Rules used by all windows */
 
 #webamp {