Is it possible for MM5 to provide the same Bottom Player View as MM4?

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

belomeclone
Posts: 54
Joined: Fri Nov 14, 2008 2:59 am

Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by belomeclone »

The "trend" with Media Playback Programs is for these tiny skinny bottom bars that display as little information as possible. This trend has kept me using MM4, where I get the Title, Artist, and Album displayed, shifted to the left, with the album art visible. As our screens get larger, having information displayed on the left becomes very important. The right side of my screen is used by my browser, so that peek out on the left displaying the Title, Artist, and Album are visible. This is how I prefer to use MediaMonkey.

MediaMonkey 5 disregards this very useful feature for a single sentence that shows the Artist and Title, centered and rendered in a small font. Visually it's unappealing, and it does not provide any benefit. I can see the current time with my browser open.

Can MM5 give us some proper customization for the Player? It inherits the legacy of MM4, it should not disregard this to chase trends. It can do both. I find MM5 to be rather visually unappealing in general, and I also do not understand why it does not come with a Gilded skin. This black and murky orange colour scheme is not what I think of when I think of MM. I know the responses I will get when asking for a skin, but Gilded was the bundled theme for MediaMonkey until it was removed in 4.0.7. It's what I identify the product with.

Keeping a consistent design language and visual style is vital for a product. I am only asking that MM5 retains that option for those users who want it. There are currently no customization options for the Bottom Bar Player, except to move it to the top.
Lowlander
Posts: 56465
Joined: Sat Sep 06, 2003 5:53 pm
Location: MediaMonkey 5

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by Lowlander »

It would depend on the Skin how the Player is configured. I don't know of a Skin that does this. There is no setting for it in MediaMonkey itself.
belomeclone
Posts: 54
Joined: Fri Nov 14, 2008 2:59 am

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by belomeclone »

Is there a guide on skins somewhere? I have the old Gilded skin, but I don't understand the skinning process or how to update it from a MM4 skin to a MM5 skin. I'm sure it needs to be altered but I can't imagine it's that drastic of an alteration. Or if I could start with an existing skin and edit it.
Timo_Beil
Posts: 659
Joined: Thu Sep 20, 2007 1:00 pm
Location: Germany, Northern Heath

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by Timo_Beil »

Skinning is complete different to MM4.
The GUI in MM5 is generated per html, you can easily play around in the code to alter the player.
1. Extract the skin you want to change to a subfolder (=name of the skin) of "skins".
2. Change the extension of the zip (as a backup).
3. Look into the Player.html in the extracted folder.
In MM5, rightclick: Inspect Element, shows the corresponding code in the Developer Pane.
Please! To prevent MM sendig repeatedly error logs to the developers, disable sending under "Help>Debug" and switch to "Developer Mode" under "Help>About".
Drakinite has built a very useful plugin to refresh the GUI without restarting the entire program.
https://www.mediamonkey.com/addons/brow ... -shortcut/
(Rightclick on the new icon for a Soft reload)
Have a look at skin_base_add.less in the skin subfolder and in the info.json .

I started with the standard skin "Material design" and have stolen some code from the skin "CodeMonkey" to make the colors exchangeable.
Important for me was a larger font for the Title an a less prominent buttons (and the colors 😬).
You can use nearly all existing MM scripts. Even the dynamic title display for very long names from the Micro Player can be used in the player.
(I don't want to publish my amateurish results. The code is too awkward, an must be simplified, but it works for me)
Good luck.
Image
EDIT: Sorry for my inaccuracy. The .mmip file ARE .zip files. With e.g. 7zip installed, you can open it with explorer's context menu, without 7zip rename the extension to .zip. MM5 also works with .zip files as a skin, so you have to change the extension to sth. rubbish after extraction to prevent double skins.
Last edited by Timo_Beil on Mon Mar 07, 2022 9:53 am, edited 3 times in total.
MM 2024.0.0.3005-port-DE, Win 11 pro, I7-6700, 16GB RAM, DB & Media>TrueNAS
belomeclone
Posts: 54
Joined: Fri Nov 14, 2008 2:59 am

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by belomeclone »

I really appreciate the write-up!

I downloaded a skin to mess around with. It downloads as a "mmip" file. I tried opening it in Notepad but that doesn't return what I'm looking for. I don't see an option to extract the skin once it's installed in MM either.
MiPi
Posts: 867
Joined: Tue Aug 18, 2009 2:56 pm
Location: Czech Republic
Contact:

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by MiPi »

belomeclone wrote: Mon Mar 07, 2022 4:50 am I really appreciate the write-up!

I downloaded a skin to mess around with. It downloads as a "mmip" file. I tried opening it in Notepad but that doesn't return what I'm looking for. I don't see an option to extract the skin once it's installed in MM either.
You can add .zip to the mmip file name and extract it manually, as it is compressed as standard ZIP file.
Erwin Hanzl
Posts: 1189
Joined: Tue Jun 13, 2017 8:47 am
Location: Vienna

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by Erwin Hanzl »

@belomeclone
You can find the installed skins under %appdata% Folder MediaMonkey5\Skins

You can test there at your own risk.
Files with .less .json .js extensions can be opened, modified and saved with Windows-Editor.
MMW 4.1.31.1919 Gold-Standardinstallation
belomeclone
Posts: 54
Joined: Fri Nov 14, 2008 2:59 am

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by belomeclone »

If it's a json extension then is it still being coded in HTML?
Erwin Hanzl
Posts: 1189
Joined: Tue Jun 13, 2017 8:47 am
Location: Vienna

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by Erwin Hanzl »

No, that's JavaScript - No internet access required.
Files with .less .json .js extensions can be opened, modified and saved with Windows-Editor.
MMW 4.1.31.1919 Gold-Standardinstallation
belomeclone
Posts: 54
Joined: Fri Nov 14, 2008 2:59 am

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by belomeclone »

So do MM5 skins come in a HTML and a Javascript variety?

I've never done any Javascript coding, I don't know the Windows Editor you speak of, my PC doesn't know how to open the file. I'm sure I could fake it or get help elsewhere enough to make it work. What editor do you suggest using?
Erwin Hanzl
Posts: 1189
Joined: Tue Jun 13, 2017 8:47 am
Location: Vienna

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by Erwin Hanzl »

What Timo_Beil means: this "Player.html " file is a specific file in a specific skin folder. This can also be opened with Windows-Editor.

Do you really want to deal with this?
This is only a small excerpt of ONE file from many.

Image



Windows-Editor: https://www.bing.com/search?q=windows+1 ... =QBRE&sp=1
MMW 4.1.31.1919 Gold-Standardinstallation
belomeclone
Posts: 54
Joined: Fri Nov 14, 2008 2:59 am

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by belomeclone »

Do I "want" to deal with it? No.

Do I think I will be able to find a modern, supported Media Player that resembles MM4 without this? No.

I would just keep using MM4 but I am getting a strange, interesting, and bizarre glitch with using it and my new hard drive. I posted about this on the MM4 section. I have looked into other media players but have not liked what I've seen. MM5 is pretty great, but that bottom bar is uninspiring.

In a perfect world, the skin would already exist, or MM4 would not be causing me issues. But we don't live in a perfect world. I don't think I can actually edit these skins to get what I want, but I don't have a choice but to try.
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by drakinite »

belomeclone wrote: Mon Mar 07, 2022 3:22 pm So do MM5 skins come in a HTML and a Javascript variety?

I've never done any Javascript coding, I don't know the Windows Editor you speak of, my PC doesn't know how to open the file. I'm sure I could fake it or get help elsewhere enough to make it work. What editor do you suggest using?
MM5 skins don't come in HTML varieties and JavaScript varieties. Hopefully I can help clarify some confusion:

MediaMonkey "skins" and "addons"/"extensions" both use the same installer type (.mmip) and have a similar folder structure. We have a help document which shows the general folder structure of MMIPs, as well as a bunch of other info on addons: https://www.mediamonkey.com/wiki/Gettin ... _Packages)
Additionally, they both can utilize any of the following files: .less, .json, .js, .svg, .html
However, each of the file types have different functionality:
  • .js: These are JavaScript files, which perform logic and define/modify the behavior of MM. You don't need JS files in a skin, though they are technically supported.
  • .json: JSON files are NOT JavaScript files (even though the acronym stands for JavaScript Object Notation). They are just data files. The only JSON file you need is info.json, which is mentioned in the link above.
  • .html: These define the structure of certain elements in the UI. They can be used by addons/extensions, such as if they want to create new dialog windows; but they are also an important part of skins. If you include a player.html in your skin, it will override the default player.html that MediaMonkey uses (see C:\Program Files (x86)\MediaMonkey 5\player.html), allowing you to change the structure of the MM player.
  • .svg: These stand for Scalable Vector Graphic - They are a type of image file. You'll only need to worry about these if you want to change MM's icons.
  • Lastly, .less: These are the most important files that skins use. These control colors, sizes, and positioning of items in the UI. LESS is essentially CSS (https://www.w3schools.com/Css/) but with extra features.
All of these are plain text files. I'm not sure what Windows-Editor Erwin is referring to, but any text editor will work. I would personally recommend either Notepad++ (More lightweight) or Visual Studio Code (Provides more features like error checking, but might be overwhelming for a beginner).

TL;DR: They're all plain text files, but the ones you have to worry about are HTML, LESS (if you want to change styling), and the single info.json metadata file that's needed for all addons. Also we have a page for skinning which is a bit barebones at the moment, but maybe it can help with a few things: https://www.mediamonkey.com/wiki/Skinning_Guide

I know this can be overwhelming for a beginner, so if you'd like, list some specific changes to the player that you're aiming to achieve, and I/we can help you with the specific code necessary to accomplish that functionality.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
belomeclone
Posts: 54
Joined: Fri Nov 14, 2008 2:59 am

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by belomeclone »

I appreciate the help Drakinite!

I am looking for:
-the same colours as in MM4's Gilded theme. This should be an easy one. According to an online colour picker, the colours are: #b9b9b9 for the left column with Home/Playing/Music. #f5f5f5 and #e9e9e9 for the alternating colours on the Music view. I would start with that.
-more importantly, I am looking at the bottom player bar. On MM4 it is larger with more information, and that information is visible in the bottom left of the screen, so the peek out of MM4 behind your browser has the Title, Artist, and Album visible. I'd like to recreate that view in MM5. Raise up the size of the player and move the Title (in a larger font), the Artist below it, and the album below that to the left side. I can provide images if needed. I'm sure we can throw in a visualization to fill in some of the empty space.

I'm not sure this is possible. This is what I'm looking for though. Thank you!
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Is it possible for MM5 to provide the same Bottom Player View as MM4?

Post by drakinite »

belomeclone wrote: Tue Mar 08, 2022 6:14 am I appreciate the help Drakinite!

I am looking for:
-the same colours as in MM4's Gilded theme. This should be an easy one. According to an online colour picker, the colours are: #b9b9b9 for the left column with Home/Playing/Music. #f5f5f5 and #e9e9e9 for the alternating colours on the Music view. I would start with that.
-more importantly, I am looking at the bottom player bar. On MM4 it is larger with more information, and that information is visible in the bottom left of the screen, so the peek out of MM4 behind your browser has the Title, Artist, and Album visible. I'd like to recreate that view in MM5. Raise up the size of the player and move the Title (in a larger font), the Artist below it, and the album below that to the left side. I can provide images if needed. I'm sure we can throw in a visualization to fill in some of the empty space.

I'm not sure this is possible. This is what I'm looking for though. Thank you!
Hi, I'm sorry for the late reply.

Changing skin colors is simple once you've got it set up. I would recommend starting with one of the default skins, but there are a few others available at https://www.mediamonkey.com/addons/brow ... 1/skins-1/ that you could use. (You're allowed to use & modify any skin published by Ventis Media, but most of the others don't have licenses attached, meaning you should ask permission if you want to redistribute it. I know that Code Monkey is distributed with the MIT license, essentially meaning you can do anything with it.)
Inside the Skins folder of your MM install, create a new folder, name it whatever you want, and paste the contents of the skin you're basing it on into that folder. (Make sure the files aren't in a subfolder). Then edit info.json with the new title and ID that you want.
After that's set up, you can edit .less files in the skin subfolder Start with skin_base_add.less - there, you can change the main colors of the skin. You can use a site like http://hexpicker.com/ to figure out hex codes, but if you are using Visual Studio Code, it'll actually show a built-in color picker to make it easier.

As for changing the layout of the player: This really depends on what skin you're starting with. But as an example, I started with the Material Design skin and did a bit of rearranging. I put the player controls on the left, and replaced the trackSummary label with a list including Title, Artist, and Album. From there, you can tweak to your heart's content. There's a lot more to it, but the basic idea is that class="classA classB" denotes that an element has two classes, .classA and .classB, and inherits the style associated with both of those. If you want to edit the attributes of a specific element, you can do it with the style tag, such as for example style="color: red;". This is the syntax: https://www.w3schools.com/Css/css_syntax.asp

Here's the slightly tweaked player.html from Material Design:

Code: Select all

<div data-id="player" data-control-class="Player">
    <div data-id="player-seekbar" class="stretchWidth" data-control-class="Slider" data-init-params="{orientation: 'horizontal', invert: false, min: 0, max: 0, speechName: 'seek bar', speechUnit: 'seconds'}" data-player-control="seek" data-optional="{group: 40, order: 10}"></div>
    <div class="flex column">
        <div data-id="player-waveform" class="stretchWidth" data-control-class="Waveform" data-player-control="waveform" data-optional="{group: 40, order: 20}" style="display: none"></div>
        <div data-id="player-row" class="fill flex row">

            <div class="dynamic fill flex flexcenter column vSeparatorTiny" style="flex: 0 0 auto">
                <div data-id="playerLeftButtons" class="playerButtons fill flex row static verticalCenter center">
                    <div data-id="player-prev" class="playerButton playerSmallButton" data-aria-label="Previous file" data-icon="player_prev" data-player-control="previous" data-optional="{group: 10, order: 10}">
                    </div>
                    <div data-id="player-play" class="playerButton playerLargeButton" data-aria-label="Play" data-icon="player_play" data-player-control="play">
                    </div>
                    <div data-id="player-pause" class="playerButton playerLargeButton" data-aria-label="Pause" data-icon="player_pause" data-player-control="pause">
                    </div>
                    <div data-id="player-stop" class="playerButton playerBigButton" data-aria-label="Stop" data-icon="player_stop" data-player-control="stop" data-optional="{group: 10, order: 20}">
                    </div>
                    <div data-id="player-next" class="playerButton playerSmallButton" data-aria-label="Next file" data-icon="player_next" data-player-control="next" data-optional="{group: 10, order: 30}">
                    </div>
                </div>
            </div>
            
            <div class="flex row" style="flex: 10 10 auto; width: 100">
                <div class="flex column dynamicShrink uiRows margins">
                    <div class="flex row">Title</div>
                    <div class="flex row">Artist</div>
                    <div class="flex row">Album</div>
                </div>
                <div class="flex column dynamicGrow uiRows margins">
                    <div class="flex row"><label data-id="player-title" class="textWrap" data-player-control="title"></label></div>
                    <div class="flex row"><label data-id="player-artist" class="textWrap" data-player-control="artist"></label></div>
                    <div class="flex row"><label data-id="player-album" class="textWrap" data-player-control="album"></label></div>
                </div>
            </div>

            <div class="flex row" style="flex: 10 10 auto; width: 100">
                <div class="fill flex column" style="z-index: -1"></div>
                <div data-id="player-rating" data-control-class="Rating" data-init-params="{starWidth: '1.72em', starMargin: '0.15em'}" data-player-control="rating" data-optional="{group: 20, order: 20, title:'Rating'}" style="display: none"></div>
                <div class="fill flex column" style="z-index: -1"></div>
                <div class="flex row">
                    <div data-id="playerRightButtons" class="flex row static verticalCenter alignRight">
                        <div data-id="player-repeat" class="playerButton playerSmallButton checkable" data-aria-label="Repeat" data-icon="repeatOne" data-player-control="repeat" data-optional="{group: 30, order: 10}">
                        </div>
                        <div data-id="player-shuffle" class="playerButton playerSmallButton checkable" data-aria-label="Shuffle" data-icon="shuffle" data-player-control="shuffle" data-optional="{group: 30, order: 20}">
                        </div>
                        <div data-id="player-playto" class="playerButton playerSmallButton" data-icon="cast" data-player-control="playTo" data-init-params="{noAddClasses: true}" data-control-class="MenuButton" data-optional="{group: 30, order: 30}">
                        </div>
                        <div data-tip="Volume bar" class="paddingSides" data-control-class="Slider" data-init-params="{orientation: 'horizontal', invert: false, min: 0, max:100, tickPlacement: 'none', tickInterval: 50, wheelStep: 5, speechName: 'volume', speechUnit: 'percent'}" data-id="player-volumebar" data-player-control="volume"></div>
                    </div>
                    <div data-id="player-vis-cont" class="flex column no-cpu">
                        <label data-id="player-rtime" class="paddingTop smallText top" data-player-control="remainingTime" data-optional="{group: 20, order: 20}"></label>
                        <div data-id="player-vis-subcont" data-optional="{group: 20, order: 30, title: 'Visualizer'}">
                            <div data-id="player-vis" data-control-class="Visualizer" data-player-control="visualizer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Post Reply