Sphinx Desktop - Floating Mini Player

[Antanasijevic]

Explore layout options for floating mini player . Instead fixed size on bottom left, try floating options, inside and outside of parent Sphinx window. Default position may be bottom left, but user should be able to move player around.

[Antanasijevic]

@tomastiminskas Here is a concept for V1:

• Player is positioned on bottom left corner by default
• Click on Title opens the parent tribe
• Hover on image reveals drag icon and highlights the player, making it moveable.

https://github.com/stakwork/sphinx-mac/assets/13258550/ea97d8cd-9289-48f0-b877-e5e07b19938c

[Antanasijevic]

@tomastiminskas Here is a finalised layout for mini player with lottie animation of pause button for light and dark skin. Please let me know if any change is needed.

Figma Layout https://www.figma.com/design/suipHjIGKg38rbWo0qHGqV/Desktop-Design-System---Dark-Version?node-id=4433%3A190870&t=SSaQWZRw9R8syM07-1

Prototypes:

Dark Version https://www.figma.com/proto/suipHjIGKg38rbWo0qHGqV/Desktop-Design-System---Dark-Version?node-id=4433-190871&t=3ws3ywzvqaLbz1sc-1&scaling=min-zoom&page-id=4433%3A190870&starting-point-node-id=4433%3A190871&show-proto-sidebar=1

Light Version https://www.figma.com/proto/suipHjIGKg38rbWo0qHGqV/Desktop-Design-System---Dark-Version?node-id=4433-191026&t=3ws3ywzvqaLbz1sc-1&scaling=min-zoom&page-id=4433%3A190870&starting-point-node-id=4433%3A191026&show-proto-sidebar=1

Video Preview

https://github.com/stakwork/sphinx-mac/assets/13258550/ba1281d6-d3eb-4430-a787-28bbc389540c

Play/Equalizer Lottie animations:

Light Version https://app.lottiefiles.com/share/24e90958-f137-45e0-8921-413366fdfb0e

Dark Version https://app.lottiefiles.com/share/d14645e2-083b-4962-94d6-3d0dd59aa735