webamp/packages/webamp-modern/README.md
Fathony Luthfillah 7451c6fe64
TrueTypeFont, Simple PlaylistEditor, scrollbars. (#1169)
* allow direct rgb as css color property

* + <wasabi:standardframe:modal:short>

* set Config, WinampConfig as global var

* normalize handleAction: del hardcoded trick

* mute console (noice reduction)

* allow internal themes in the theme list

* add (temporary) appearance to WasabiButton

* check points and add possible todo.

* yarn build, yarn serve

* Variable.guid is now optional

* + PLEdit (non gui) to hold mp3 tracks

* move eject,next,prev & <input> files to UIRoot

* trial update song-title on next/prev. (failed)

* track index correction, prettier

* show pl (GUI)

* avoid error on console log: audio interupted.

* del requirement of UI_ROOT, reg Object class.
ui_root will not be singleton in future.

* stop searching of a binding when founded.

* should never select any text.

* explicit return of a function

* avoid vscode problem (red warn on file name)

* PlayList primitive colors (bg,fg)

* plEdit: selected & currrent colors.

* +button.css, move any css of button.

* assure transparancy instead opaque

* safety when bitmap=null

* del dead code

* del dead code

* correction: studio.button instead wasabi.button

* prettier

* show scrollbar in pl (dummy)

* solve vscode/ts complain

* +common scrollbar

* always show scrollbar (full height) whatsoever.

* reposition that match. (taken from x2nie-dev)

* completing scrollbar dimensions.

* +text.shadow

* animatedlayer.onstop

* text.onchanged

* bugfix error: text-auto-wrapped.

* +some xui (drone skin)

* allow Time shown as Remaining (instead ellapsed)

* bugfix time remaining overalaped with kbps.

* comments of container types (prediction)

* bring window to most top on click.

* temporary case. (skin: drone)

* Complete Slider implementation about virtual thumb

* avoid red warning on filename of vscode.

* +dirty audio.analyzer (skin:MMD3)

* allow "vis" element to be position:absolute.

* trying skin:Warp_skin.wal (failed)

* avoid red warning on filename of vscode.

* +todo

* +api:setactivatednocallback

* pl: +slider,real. (instead of fake scroll element)

* PL slider moved when mouse wheel. (pasive)

* complete pl scroll.

* avoid red warning on filename of vscode.

* set ColorList bg

* cleanup, completing MMD3

* add Grip (pl scrollbar), cleanup.

* change where the build dir is.

Co-authored-by: Fathony <fathony@smart-leaders.net>
2022-05-07 12:11:37 -07:00

3.3 KiB

Running locally

Assuming you have Yarn installed:

cd packages/webamp-modern
yarn
yarn start

Performance Improvements

  • We could use CSS filter to try to improve the speed of switching gamma colors?
  • We could use WebGL to try to improve the speed of switching gamma colors?
  • We could use some CSS techniques to avoid having to appply inline style to each BitmapFont character's DOM node.
  • We should profile the parse phase to see what's taking time. Perhaps there's some sync image work that could be done lazily.
  • Remove some paranoid validation in the VM.
  • Consider throttling time updates coming from audio
  • Attach method binding on script init.

TODO Next

  • Implement event-listner-pool for native on('eventname'). It will improves readability & speed
  • Why doesn't scrolling work property in MMD3?
  • Implement proper color
    • Move gammacolor to GPU?
  • Requires VM
    • Look at componentbucket (Where can I find the images)
    • How is the scroll window for colors supposed to work?
    • How is the position slider supposed to work?
  • Standardize handling of different type condition permutations in interpreter
  • Implement EQ
  • Implament global actions
    • TOGGLE
    • MINIMIZE
  • Allow for skins which don't have gamma sets
  • Figure out if global NULL is actually typed as INT in Maki. I suspect there is no NULL type, but only an INT who happens to be zero.
  • Implement custom list instead of html select, so scrollbars can be rendered properly.
  • Fix all // FIXME
  • SystemObject.getruntimeversion
  • SystemObject.getskinname
  • Handle clicking through transparent: Using css clip-path. https://stackoverflow.com/questions/38487569/click-through-png-image-only-if-clicked-coordinate-is-transparent

TODO Some day

  • Handle case (in)sensitivity of includes.
  • Handle forward/backward slashes issues (if they exist)

Known Bugs

  • In GuiObj's handling of left click, it's possible for the y/x of the click event to fall outside of the element being clicked. To repro click just above the volume2 of MMD3. Y can be one pixel above the clientBoundingRect of the element. Why?

Phases of Initialization

Asset Parse

Starting with skin.xml, and inlining each <include /> we parse XML. As we go, we initialize GUI objects and attach them to their parent. During this phase we also encounter other asset files like Maki script, images, and fonts. These are parsed as they are encountered and setaside into a look-aside table (Maki scripts might live in the tree...).

This phase is async since it may require reading files from zip or doing image/font manipulation which is inherently async.

Object Initialization

Once all look-aside tables are populated, we notify all GUI objects to initialize themselves by propogating from the root of the tree to the leaves. Each node is reponsible for notifying its children. In this phase components pull images/scripts/fonts out of their look-aside tables. [Question: Could these just be lazy?]. At this point we also hook up any event bindings/hooks that exist in Maki.

Maki Initialization

Once all nodes have been initialized, we trigger/dispatch System.onScriptLoaded for each Maki script.

First paint

Now we can begin panting