[Progress] MiniPlayer Work

[BarakaAka1Only]

This is my first time playing around with electron and i wanted to see what i could do with the Mini player.

So with having the idea of "porting" the OS X stylization to electron i found that a lot is very possible;
For one adding the arrow (just like the Popview in OS X / Objective-C on the menubar) with the album art.

Now there is a few things that could be done with border styling but with that there isn't a way for such to have the image "draw In" just like

[backgroundImage drawInRect:[self bounds] fromRect:NSMakeRect(0, 0, backgroundImage.size.width, backgroundImage.size.height) operation:NSCompositeSourceOver fraction:1.0];

So with the power of clips within css i got it working perfectly (I made a custom arrow in Illustrator and rendered it svg "clipart") i did however changed a couple of things to get it working for instance

miniplayer.setPosition(position.x, position.y);

Although it's positioned, the window doesn't get centered correctly with the trayIcon instead i used the trayPosition (in this case i changed it to bounds)

miniplayer.setPosition(parseInt(bounds.x - (Param.Width / 2) + (bounds.width / 2)), bounds.y + Param.Arrow + 10);

(Param is a Param object with Height,Width,Arrow ints)

and some HTML//CSS/JS minor work (and fixes with the setupGMusic / gpmIPCInterface.on event)

Images:

As of now it doesn't look like much but since i only just started i do plan on fixing up the CSS and such for the Mini Player to help progress things.

Figured i have this open for progress and for anyone else's input.

Let me know what you guys think.

[jacobwgillespie]

Looking nice! You should open a PR early on this one so we can follow along on the code.

I need to get going on a settings framework here so that stuff like miniplayer size can be a user setting...

[BarakaAka1Only]

Darn!

WHOA. Its been quite a while since i've posted any updates regarding this and .... that is on me. I've been very very busy and haven't had much the time to do much as i intended; i am sure you guys are busy as well.

But that doesn't leave this out and abandoned.

Updates! (yay)

So been i've doing a lot since your recent changes @jacobwgillespie and there is still things that have to get done as i am aware.

So far i've been pushing myself to get this MiniPlayer fixed up following my last update.

This MiniPlayer i went and coded up some cool additions following:

• RadiantTools
• MiniPlayer Visualizations
• Volume
• Drop menu
• Art animations
• Dock / Undock
• IMFL
• Styles

RadiantTools

RadiantTools is my own extension to GMusic. In the past regarding the Objective-C version of Radiant Player i sort of used it.

Now RadiantTools isn't a module it's just a standard OOP JS.

The reason behind making RadiantTools was for one fact doing Lyrics as you guys seen in the past with my Objective-C version.

But i wanted to expand it to have it moreless like helpers.

With RadiantTools you can get current song id's , what region you are in, Song information ( yes i know GMusic has this; this is just to expand it), AlbumArt (Full, Large, Medium, Small, Mini sizes), and song sharing (FB, Twitter), IMFL (Roll the dice :) )

MiniPlayer Visualizations

I believe this is a Google thing but the usage for visualizations outside of the MiniPlayer doesn't emit anything, normally you'd hover over the song artwork and you'd have a set of options for visualizations. Not anymore, anyhow due to that i figured why not add visualizations to the MiniPlayer.

Now i have added about 3 following

• Stars
• A trail ballish thing (haha not even sure what to call it)
• Fly (which takes a image and pops in random places for now it's using the Radiant Player icon)

These for now are at random and can change when clicking right on the MiniPlayer.

This does have an on and off-switch right in the MiniPlayer with my addition of Drop menus

Drop menus

I wanted things to be easy as possible to add sections to the MiniPlayer say in this case a way to pop something up per say toggleable options? Or some events to show up etc.

It's all clean and extendable for what it is just something i did quickly to get to the point.

Volume

Volume set, change as you like with it being toggleable right on the MiniPlayer.

Now Volume was tricky and still is due to the way how i am doing the Docking / Undocking.

Currently there are 2 issues one if setting rc-slider => value from the mainIPCInterface, yes it will set it but the slider get stuck and when you try to change the volume its really hard as it will just go back to it's set volume value from the first place.

This is also present when wanting to change the current play time (seeking through the song playing) as it has the same issue.

Secondly when docking and undocking the values are not synced and its due to the way how i did Docking / Undocking. Which i'll explain shortly.

Art animations

With adding art in the background as to my last post / update here. I added support for that and for it to have the same property look as to what the Objective-C version of Radiant Player had.

So i coded up a class and added animations that are changeable when change:track is emitted so yes its random which has the following

• fade
• zoom
• rotateIn
• flip
• lightSpeed

All of which is js and more could be added hence extendable but didn't want to overwhelm everything adding more and more but who knows that could change.

Dock / Undock

So i wanted to have the same properties as to what the Objective-C version of Radiant Player had; the ability to dock and undock the MiniPlayer with the added bonus of Always on top.

So with adding Drop menus and such i was able to get it.

As i stated above i'd explain the way i am doing this method.
This may or may not the the BEST approach and if it isn't my apologizes in advanced.

I am rendering 2 BrowserWindows which one is the normal MiniPlayer and the other MiniPlayer Undocked.

Songs and such will remain the same due to the renderer but not everything, just like the Volume issue i stated above and doing toggleable actions like checkbox that are active.

So due to said issues in this case the checkboxes they will be only toggleable in the state of the undocked MiniPlayer but when i show the screenshots i'd make sense as to why i did it this way.

Yes with the MiniPlayer Undocked the window can be dragged around.

I am still not sure if it's the best way of doing it but for what it is currently works. But this is the point of having Alphas / Betas so great minds here can come together to get things solved and better than it was.

IMFL

Ahh the good old IMFL, this was a must add for me and with the help of my RadiantTools i was able to add it 👍 just like the Objective-C version

So YES that means you all can ROLL THE DICE.

Oh and when clicking the dice (rolling i mean xD) a "backdrop" with Google's animated dice image appears :)

Note i still have yet to add it's reducers actions so when triggered it'd "log" it for Dev purposes
i.e src/redux/*

Styles O:

With this i did it as clean as possible to resemble Google's pretty much all the styles are done for it just as the same with the rest of the styling above.

(Just have slightly a few things to touch up.)

Oh and with this i added a very solid No Playing view. So when you first open Radiant Player you have
a nice UI telling you no song is playing and since it's the case why not Roll the dice to get things started :) (this will only show when opening Radiant Player it could however render back when songs in queue are completed which i plan to do later)

[BarakaAka1Only]

PART 2

Screenshots

The long awaited screenshots sorry but i figured a detailed log of what i've done in the last 6 days was a must sorry for it being this long.

No Song Playing {Docked}

No Song Playing {UnDocked}

If you noticed the tiles there, those are animated :D.

Volume

I am planning to have the icon update when you change the volume.

Drop Menu {Docked}

Drop Menu {UnDocked}

Notice {Docked} version has disabled i.e the opacity is down and you can't toggle while the {UnDocked} isn't also when checking to change the this.state the checkbox is animated and no its not a input:checked.

Drop Menu {UnDocked} Checked

Button States

UI {Undocked} no :hover

UI {Docked} no :hover

UI {Undocked} :hover

UI {Docked} :hover

Visualizations

(Have to fix that one still)

Here is a link to a 60MB GIF i did so you guys can see how it looks without standstills

MiniPlayer Demo?

Closing

So there you guys have it my long awaited update on the MiniPlayer and again guys sorry for the long wait on this.

I am continuing it. I don't know a lot with React but i know enough to make things work at least right?
(React is easy enough i just get lost sometimes lol)

There are still bugs and about a few i am not sure how to fix so hopefully someone can help with that (as to the issues i stated above)

I had a lot of fun doing this and a lot of pulling out my hair but glad to be to help and will continue to do so.

Let me know what you guys think and i'll be doing a pull request, not sure to do it right away as i still want to play around with things.

But if it's important i'll put it up on my end but not pull request it, meaning just have it up to compare or however you want to call it.

Anyhow this is progress nonetheless as my whole point of making this thread.

I still do plan on other things like Lyrics but i suppose that will be for later on.

I hope this progression helps moves things in the place for a release as i know a lot of users with the Objective-C version are encountering issues.

Again i know there is still A LOT of things to get done, but just know i'm here to help.

Looking forward to hearing your guys' thoughts

-- Baraka

[chrismou]

Oof, the screenshots look awesome! 👍

[BarakaAka1Only]

Phew okay so i figured out a way to get the volume sync issue to work which doing so made a few changes to the BrowserWindow control for the MiniPlayer pretty much i scraped my changes and re-did it cleaner. Now with the power of executeJavaScript() i was able to set the slider its correct state which is all that was need.

The only thing setting a default now yes i can add it (it is there but commit out) doing so with the events emitted it messes up the renders causing any animations to load crazy fast like it's high on drugs not really sure why; got to look into that.

I wouldn't say setting a default is THAT important i mean cause when you are on the Google Player itself and you change the volume and you reload Google Play you can see the set volume you added is present but after doing a few reloads it will revoke back to 100.

Current changes, due to the whole way how i am doing the Docked and Undocked i am going to hide the Drop menu and only display it in a Undocked state.

Reason for that is due to if you are in the docked mode and you set visualizations on or set Always on top active (even tho you can't as they are disabled in docked mode) you're not going to have the MiniPlayer visible due to the blur and close actions and you won't be able to see it in this case visualizations unless you active the MiniPlayer on the tray again. Wouldn't make sense and in docked mode you can't do Always on top because how will it be on top if it's docked ?

Did a few CSS fixes and cleaned up the visualizations code and with the fixed volume sync there is no more issues with trying to set a new volume as before if doing defaultValue in the rc-slider it'd get stuck on the same state making it near impossible to set a volume.

Also will be re-rendering No song playing when player is disabled via no songs in queue etc..

That's pretty much it for now will be updating this as i continue on with development.

[jacobwgillespie]

Looking awesome! Looking forward to the PR!

[BarakaAka1Only]

@jacobwgillespie Thank you :D

Update

• Done more fixes with the CSS adding some what of a mixin thing pretty much pre-defined scss values so that doing possibly theming can be better for customization.

• Added No song playing when state === stopped so it goes back to the default UI for my No song playing

• Drop menus are now only visible when the Mini Player is in a undocked state

• Finally added Redux actions for

1. IMFL
2. Seek Forward
3. Replay Back

• Looking around to Google's current additions in this case Youtube with-in Google Play Music. I think i am going to be adding Youtube video support which will be an addition to my RadiantTools right on the Mini Player.

Everything is already there, i just have to go in and implement it and figure out its placement following a class handler? Once i get around to that, I believe that i'll be done :D So yes that means a PR

Been doing a lot of work and testing all my changes even leaving the MiniPlayer open for over 24 hrs to see if anything goes wrong and all is pretty solid other than the player's DraggableSlider

I already addressed one of the issues with it above in this thread and found just one other thing.
It'd get stuck at time of 1:40 to fix it you'd just click on the slider and it'd fix itself, this only happens sometimes. Not sure why possibly has to do with the error (that's always been present but i have no idea how to fix it)

Uncaught TypeError: Cannot read property 'toFixed' of undefined at Object.ensureValuePrecision

But other than that all good :)

I'll be updating you guys once i have something to show i.e YT O:

--Baraka

[BarakaAka1Only]

A Proud Update :D

I can now say that Youtube Support has been added :D. Took me about an hour and with reading Youtube's API. This will require react-youtube.

Now the fun part, A LOT of the videos caused a restriction upon playing because the one and only VEVO pwned. Due to that i added in a custom message embedded in the iframe saying

Looks like Radiant Player can't play this video as to grounds of restriction by YouTube. Click the "X" on the top right to continue

So i was trying to figure out WHY on GPM it works and not with other windows in this case the Mini Player causing a restriction.

After looking and reading Youtube's API it turned out that there is a certain blacklist which made me think about the Headers. Little to find out it was the Headers by the referrer hence the "whitelist".

Thankfully Electron has a session controller which i can invoke options before doing anything with requests. Once i did that BAM restrictions solved :D.

So currently the setup follows just for now

• No autoplaying
• No controls
• No Info such as the title etc
• No related video crap at the end
• When video is completed it'd start back to fresh (in-case you want to re-watch)
• No keyboard events
• No annotations
• No fullscreen button

UI will show a Youtube play button in the middle of the window and will only show in the undocked state of the MiniPlayer

(The reason for it being in the middle is because i didn't know the best place to place it)

This does has a toggle to show / hide event so when on show it'd be the MiniPlayer with just the YouTube video playing. Then a X button to close the YouTube video shown.

Its very simple and clean.

Here is some screenshots:

No hover

Hovered

When Clicked

When clicking the song will pause (MiniPlayer)

Close Button

When clicking the close button song will un-pause (MiniPlayer)

There is still a few things i have to figure out cause there is a minor issue, with it say anchor links they are clickable causing a new window to pop up which you can't close unless you do it in the console with window.close(); which is why i put in the above setup but there is still things i am finding like the Youtube logo that is clickable.

And one last thing so if there is a video with a restriction, it'd only happen once, once you change the song to something else and go back the said "restricted" video, it'd work and will continue to work.
I am assuming the session gets started but the requests don't see it until after. Not sure what to do about that.

NOTE: This will only occur if you play a song one first load with a YT video, but if you play a song with a non-YT video then this is no longer an issue.

But other than that all is good enough until i find anything else :| .

GIF: 30MB (sorry :|)

MiniPlayer Youtube Preview

--Baraka

P.S Will be doing a css change with the buttons for a shadow like feel so it's at least visible than hard to see.

[BarakaAka1Only]

Update

Getting most of these minor bugs fixed following:

• Fixed anchor links issue, i completely removed all and any elements that could invoke any anchor tags, so onReady (event) when the player loads even after said video is ended it will always remove said elements allowing only play, pause and exit; making it a clean only video as it should be.

• added in a hasYoutube function by detection on GPM player which remoteObject() will handle it being !!1 or !1, that way with my youtubeID addition it can't go wrong.

• Seems now that this restriction even on first load has solved itself been testing like crazy and i haven't seen anymore restricted displays again even on first load by a song that contains a Youtube video hooray!

• Added more redux actions i.e GPM_CHANGE_YOUTUBE, GPM_CHECKED_YOUTUBE
  (changes YT id with a YT id or a string saying no video, and our check to see if GPM has a YT video)

• added in shadow filters for the buttons that are plain and white only to boost visibility

There is a few things i want to look over making sure i didn't leave any un-needed things or things where it shouldn't be as again i've been testing things but i am sure enough i didn't as i got this working perfectly but doesn't hurt to recheck my work.

Once i get that out of the way, going to see what else i need to do cause i didn't add IMFL etc to any menu controls as i've been busy with everything else. But if i don't find anything else or if i or maybe you guys don't have any features to add-on what i already have then, I'd say this would be marked ready enough for a PR.

I'll be continuing on with my development and yeah it might seem some what slow but i just want to ensure things are good to go than sending out something that doesn't work. I'll be updating this thread as i go. Cheers!

--Baraka

[BarakaAka1Only]

Short Update

So i've been still working hard at getting this whole this solid enough for a PR (i am about right there)
While doing this and with my recent additions i've been thinking what would the end user want? So in this case with my Youtube addition, i went ahead and added full screen support. Now doing this Electron thing i'm still relatively new to it and in-order to property getting it working, I had to get to reading xD It's nothing bad just want to put it out there.

The reason being for adding the fullscreen support is due to the fact that users may want to watch the video in full screen display while using the MiniPlayer than watching it in a 356px area. So like always this is only available in the undocked state. Fullscreen has its own button that toggles just like the X button which you can see here :

Next few things, with the volume i now added icon updates meaning when you change the volume it will also update the icon according the volumes' state which you can see here:

Volume === 100

Volume > 50

Volume === 10

Volume === 0

And yes they sync with the docked and undocked state, the only thing that i didn't do due to the fact of me removing all the Youtube elements so there is no external links etc is syncing the Volume with the Youtube Player at this time (i may add it later on only if its an important thing?)

I finally added IMFL to the Controls Menu

And last thing RadiantTools!

So like i stated above i created RadiantTools but as a normal OOP JS extension which really isn't any be of a deal but there was some things i wanted to add which required doing an emitter. Now yes i could have easily done a MutationObserver etc but i wanted to keep things moreless simple just like the GMusic.js. So with it being open source and what not i took the liberty and created an actual module that is base on GMusic.js but of-course with only my additions that exists in the OOP version (meaning nothing but about a few things GMusic.js uses i.e its structure and only about a couple of adopted functions)

So that means both module and oop versions work.

Oh i almost forgot i went and made this for Ads with-in the player:

==

Which will be displayed when a song via the Radio plays an Ad. (this does not display if there is a video ad because there is no emit that the Player can do as its not an actual song if you get the whole thing.)

With all these additions it's been very very smooth and with only a minimum of about 150 mb of memory each on about 2 Electron Helpers (during the dev side not the compiled version as i haven't yet to even do that)

So if you guys want i can compile a version to test / play around so that you guys can tell me if you see anything that i didn't mention at all. And if all is a-okay then i'll be more than happy to submit a PR :D

Let me know but that is all for now as always i'll continue to update this thread as i go.

--Baraka

[jacobwgillespie]

Looks awesome! Send the PR! 😄 I can take a look at it running there and get it merged.

Thanks!

[BarakaAka1Only]

@jacobwgillespie
Thank you :D and okay then, i'ma spend tonight getting the files ready and making sure all i added / changed is present and working. Not gonna lie due to me doing extensive testing etc i didn't officially fork the repo yet in order to do a proper PR.

Right now i am assembling my RadiantTools documenting everything etc. Once that is done, i'll fork it and merge my changes cleanly (yeah i know it's a dumb way moreless but it's better to know where and what i did out box as i did do a lot so i can easily assemble the PR correctly) as i have a lot of stuff like

:| it happens when testing is involved xD

[BarakaAka1Only]

Sometimes i hate my ISP I've been waiting to get this PR up for the last 4 days but i couldn't do a thing until my ISP fixed the issue. But now that the issue is resolved, I am about to submit the PR finally. I already published my RadiantTools via radiant.js both on npm and here on Github. I am just now testing everything before i PR it (i forked radiant-player-electron and manually added all my changes / additions which is why i am testing like i said above moreless the dumb way lol)

Once all test past a PR should be submitted by the hour or so, sorry about the delay!

[BarakaAka1Only]

PR has been submitted :D @jacobwgillespie #17

Just waiting for travis to complete its check. Once again sorry about the delay.

[BarakaAka1Only]

Looks like there is something wrong as travis reports No Rakefile found travis build error not really sure about why that is :S (maybe cause there is no .travis.yml file not sure? @jacobwgillespie)

[jacobwgillespie]

Yep, it's missing the .travis.yml, so it's trying the default (Ruby tests). I just added the Travis config to master, so if you pull in the latest commits your branch / PR should pick it up. 👍

[BarakaAka1Only]

Alright cool, i just merged them now, waiting on travis to complete the build.

[BarakaAka1Only]

Darn i forgot to do the lint tests going to do it now to fix all the errors.

[jacobwgillespie]

If you want, ./node_modules/.bin/eslint --fix . should automatically handle a lot of the basic stuff (like indentation).

[BarakaAka1Only]

@jacobwgillespie sorry about the wait, and thanks for that bit it did help! Had another ISP issue but anyhow i got all the lint issues resolved; it didn't help that i use another IDE for this (phpstorm); now using Atom >.>

Had to do a lot of changes to the code that i derped (over 989 errors whoops) on (sorry) but everything runs and works the same ;)

Awaiting for travis once again

Edit : The command "npm run lint" exited with 0. AWESOME

[BarakaAka1Only]

And we are good all passed :D