webamp/packages/webamp-modern/README.md
Fathony Luthfillah 6a97db0a13
x2nie dev8 (Multi Skin Engines) (#1203)
* prettier

* typo

* bugfix: expect error on non supported skin format

* multiple instance, different gamma (colors)

* bugfix colortheme bg, cleanup

* prettier

* back to load single skin, del dead code

* del hack()

* trial to rename 'parse' -> skinengine_wal

* fully SkinEngine_Audio

* cleanup console warn.

* real switchSkin

* integrate WAL parser with plugable skinEngine.

* +KJofol !

* show Vis, Song,

* +WindowsMediaPlayer: Engine,Skins.

* load JS

* MMD3's header: movable

* +DialKnob

* +Button for down image that use global bmp

* preparing to Dock (layout name|mode)

* dock!

* undoc button

* +FloodLevel: kjofol seek. only ui/drag-mouse

* bugfix can't click

* +slider action.

* del dead code

* bugfix on switch kjofol skin

* call dispose() on switch skin

* bugfix Audion timer.

* bugfix loading skin*.zip, bugfix knob

* demo: loading .zip (unknown|ambiguous ext)

* just rename file

* wsz: failed to load wsz:(

* default Equalizer: missing #11,#12

* loading classic skin .wsz

* bugfix: don't stop when bitmap not found

* maximum viable.

* Replace the previous base with DeClassified

This commit aims to replace the base used for rendering Classic Skins in Webamp Modern with the latest commit of DeClassified

* added iso support for the EQ, update base skin

* working tooltips for the time display

* rename wsz_root to skin

for some reason this still doesnt make webamp modern render the skin it's given

* a bunch of things

* allow wsz_root to skin. (failed due missing files)

* prettier

* add but ignore. maybe soon be used

* temporary disabling "application.mi"

* reusing old classic code, that works

* + manifesto

* okay, lets use skin in correct way

* ren file

* redefining eq xml

* thumb background changes when mousemove

* +Pitch !

* set seek z-order to be not covering pitch.

* pitch: smooth audio effect during changes.

* bugfix normal pitch != 100%

* +Shade mode

* add objective-c syntaxt highlighter

* +Repeat, Shuffle

* Call & StrangeCall diff exploration

* +FileExtractor

* prettier.

* loading sonique for first time

* loading sonique for first time

* showing the main frame, + regional applied

* play,pause,stop

* play,pause,stop click images

* revert to using std|*.json

* show song duration (both enquee & addtrack)

* finding a correct bitrate

* +real metadata, +experiment bitRate

* show real song artist + title

* +showing real KBPS, real KHZ.

* track.id is not (can not be) required,
error on eqnueeefile()

* complete album art.

* bugfix volume onchanged

* del dead code

* lowercase key, to avoid misleading

* lowercase key, to avoid misleading

* speedup id3 parsing by Promise

* load another maki

* valid: uiRoot required for vm.

* move Track

* playlist text elipsis

* +scifi (sample skin)

* first attept to wrap text inside an irregular
shape

* reduce noise in html. => head/css.

* show cone gradient as Ring's preparation.

* show progress Ring

* both ring are now drawn.

* allow 270deg

* preparing real progress

* completing ui, no event yet

* bugfix mistaken mask

* allowing ring.action (+events)

* shuffle,repeat.

* eject

* switch to layout:NAV

* switch to layout:SMALL

* adding JetAudio support

* all bitmaps are loaded

* prevent 'undefined' id.

* show something visible :P

* preparing to load one tag with several meaning

* adding JetCowonAudio (old uib) support

* bugfix CORS issue of api.webampskins.org/graphql

* more window buttons

* add more sonique skin

* do list of ini content

* valid yarn build.

* sgf extractor

* sonique icon

* ignore 'extracted-*' folders

* add more sonique skin to load

* custom bitmap (just shown)

* just colorized

* maybe yes/no. colors is not confirmed

* not-found items (
taken from sonique install dir)

* load global png: via .ts

* show icons in circle buttons!

* exploring rgn (failed)

* can load from path (yeah, slow! :v)

* add freform/winamp

* add lineHeight to adjust font-size

* add border-bottom of menus

* prefix css (scrollbars)

* just commit, whatever.

* bugfix frequency position (not overlaped)

* +Menu ! (can only hover & mouse-down)

* still bugfix lineheight of titlebar's text

* show deprecated class

* show deprecated methods

* better on showing deprecated

* bugfix Menu.GUID

* force lowercase

* menus res

* set zero as a valid value of calcelation.

* completing Container props

* add more props, and also by retype (lowcase typo)

* pre-add

* +List, etc.

* addd more props

* rename _width -> _w & _height -> _h

* +onresize

* more detail message of too many similar error

* +ontextchanged

* log description on where the error come?

* avoid missing script id. (better debug)

* attaching WindowHolder

* my BigBento is just working (some hardcoded)

* add (my hacked) BigBento into selection.

* rename: _resizable -> _canResize. to avoid conflict
in Frame

* Frame.from = L

* a bit better. but not reflect on toggle click.

* reaching 71% of maki implementation

* mute frame border

* MUTE GRAPHQL ERROR CORS.

* dummy method: addSubMenu

* oke lah. lumayan

* implement windowholder for PL (only).

* correct align children: left & right.

* a bit better (assuring all key = lowercased)

* recompile some scripts

* bugfix thinger

* +MMD3 with thinger included (standalone)

* bugfix mono/stereo  get by text.display="songinfo"

* +winamp browser

* + Maki Explorer

* +fake implementation

* Big Bugfix: COnfig Item

* I understand, bud no found any mistake

* trial to compare string == insensitive

* trial to compare string != insensitive

* trial to case insensitive

* trial to compare string != insensitive

* bugfix triggering multi events

* set DEBUG, doesnt work :(

* more preserved guid

* mice down/up = work. but no visually.

* add undefined as fake

* implement fake Popup > open @mouse-hover

* bugfix: hover didn't work

* mute lint error

* bugfix xmlParam -> toLowerCase

* failed code to comment:

* allow bool as int

* mute console

* unhide text when not expanded | to find a text

* inpect "Class" in binary (distinct to other var)

* bugfix CORS cdn. , wait until user click demo.

* bugfix reading unicode char.

* Mad Apple Girl dancing

* Mad Apple Girl skin

* bad apple HD

* set back Text to be used by titlebar

* Completing missing classes (For better
 maki explorer / maki understanding)

* split editor to 2, for comparing up & down

* mark CLASS. by subclassing of vars identification

* Full speed animation

* add more maki: Application, File+XmlDoc

* add more maki: Application, File+XmlDoc

* more info when error (id of script)

* +global: application. +few methods

* +few methods.

* beautify (format doc), (typo)

* bugfix eris-lund: found a fatal error/program stop

* Class defintion (in maki file) is back supported.

* STUPID? mute ERROR. (don't stop)

* set back to very-simple logic

* implement alternateText

* bugfix a maki file loaded twice (multi)

* + trigger event in a class.

* mute console

* sorry, for hardcoded. ;p

* clean up uneeded dependency

* load very simple part: main.bmp + cbutton.bmp

* load main.shaded

* bitrates

* bitrates

* more classic skin

* + note & link, +full bitlist

* more classic items

* more progress.

* ++ various implementation, based on /progress

* *.WMZ region.txt is now ready !

* typo.

* integrate play/pause/stop statuses + mono|stereo

* network status

* change: wa.play.red => traffic.red (buffering)

* Volume + Pan

* EQ + PL buttons

* bugfix Text (char not found , too narrow
 bitmapfont)

* TIME text is clickable

* +Shuffle + Repeat

* better pseudo minus sign taken from "5" & "7" char

* pixel-perfect of Timer (text) of WInamp Modern.

* completing classic.player (container)

* completing VISCOLOR.txt parsing & applying values

* bugfix wrong parameter of vis

* Allow bitmap transparency by color (WMP)

* bugfix wrong parameter of vis

* Green Head is back running! (WMP)

* running WMP correctly

* running WMP correctly: background-color

* format from root dir

* format from root dir

* reduce lint complain

* del unknown file

---------

Co-authored-by: Fathony <fathony@smart-leaders.net>
Co-authored-by: Eris Lund <38136789+0x5066@users.noreply.github.com>
2023-02-23 08:41:17 -05:00

3.4 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)
  • Draw in few canvases instead of huge HTML Elements

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