WebNowPlaying plugin. Supports sites like Youtube and Soundcloud

[tjhrulz]

Suggestion for next update:

Instead of [!CommandMeasure MeasurePlayPause "SetPosition +5"]
Maybe do something like [!CommandMeasure MeasurePlayPause "SetPosition 5"]
Which would skip to 5 percent into the song.

Right now i have set LeftMouseUpAction on my bar with
[!CommandMeasure mProgress "SetPosition $MouseX:%$"]

Which works flawlessly on YouTube, but SoundCloud does not like that format.
(Even after the 0.4.0.0 update) The song just skips the beginning when clicking on the bar.

Cannot really see any way i could make the bar clickable with just SetPosition +/-X.

It actually is already like that (SetPosition works the same as it does for NowPlaying). If there is no +/- in the command then it assumes you want to go to that part of the song. So SetPosition 51 would set you at 51% of the way through the song. Look at your code that is already how you use that.

Let me download your skin and see if I can replicate it.

Edit: Your skin works just fine for me on every player I tested, obviously I am using the 0.4 plugin and extension. (PS. You might want to add a height to your album art so site that have square art do not make it extend past the bottom of the player) Maybe soundcloud is doing a staged rollout or something of a new website design? What language is it in and could you send a screenshot of soundcloud while listening to some music.

[StArL0rd84]

It actually is already like that (SetPosition works the same as it does for NowPlaying). If there is no +/- in the command then it assumes you want to go to that part of the song. So SetPosition 51 would set you at 51% of the way through the song. Look at your code that is already how you use that.

Let me download your skin and see if I can replicate it.

Edit: Your skin works just fine for me on every player I tested, obviously I am using the 0.4 plugin and extension. (PS. You might want to add a height to your album art so site that have square art do not make it extend past the bottom of the player) Maybe soundcloud is doing a staged rollout or something of a new website design? What language is it in and could you send a screenshot of soundcloud while listening to some music.

Sorry for not responding sooner, but my plate is pretty full at the moment
This is my bar code:
(Can't easily package the new skin because it is integrated into a huge suite)

Code: Select all

[pBarStartBg]
 Meter=Image
 ImageName=#@#Images\BarStart.png
 X=75
 Y=6r
 AntiAlias=1
 ImageTint=#BarBgColor#,#BarBgTrans#
 DynamicVariables=1
 Group=BarBgTrans1
[pBarStart]
 Meter=Image
 ImageName=#@#Images\BarStart.png
 X=r
 Y=r
 AntiAlias=1
 ImageTint=#BarColor#,#BarTrans#
 Group=Controls&Info | BarTrans
[pBar]
 Meter=Bar
 MeasureName=mProgress
 X=3r
 Y=r
 W=146
 H=6
 BarColor=#BarColor#,#BarTrans#
 SolidColor=#BarBgColor#,#BarBgTrans#
 BarOrientation=Horizontal
 LeftMouseUpAction=[!CommandMeasure mProgress "SetPosition $MouseX:%$"]
 Group=Controls&Info | BarTrans | BarBgTrans2
[pBarEnd]
 Meter=Image
 ImageName=#@#Images\BarStart.png
 ImageFlip=Horizontal
 X=(([pBar:X])+([pBar:W]/2))
 Y=r
 AntiAlias=1
 ImageTint=#BarBgColor#,#BarBgTrans#
 Group=Controls&Info | BarBgTrans1
[pBarKnob]
 Meter=Image
 ImageName=#@#Images\BarStart.png
 ImageTint=#BarColor#,#BarTrans#
 DynamicVariables=1
 ImageFlip=Horizontal
 X=(([pBar:W]*(([mProgress:%]/100)))+([pBarStart:X]+3))
 Y=r
 AntiAlias=1
 Group=Controls&Info | BarTrans

And if i just do something like [!CommandMeasure mProgress "SetPosition 77"]
It still borks

Screenshot of SoundCloud:

SoundCloudScr.png

I am using the 0.4 plugin and extension:

fileversion.png

SoundCloudUpd.png

[tjhrulz]

Sorry for not responding sooner, but my plate is pretty full at the moment
This is my bar code:
(Can't easily package the new skin because it is integrated into a huge suite)

Code: Select all

[pBarStartBg]
 Meter=Image
 ImageName=#@#Images\BarStart.png
 X=75
 Y=6r
 AntiAlias=1
 ImageTint=#BarBgColor#,#BarBgTrans#
 DynamicVariables=1
 Group=BarBgTrans1
[pBarStart]
 Meter=Image
 ImageName=#@#Images\BarStart.png
 X=r
 Y=r
 AntiAlias=1
 ImageTint=#BarColor#,#BarTrans#
 Group=Controls&Info | BarTrans
[pBar]
 Meter=Bar
 MeasureName=mProgress
 X=3r
 Y=r
 W=146
 H=6
 BarColor=#BarColor#,#BarTrans#
 SolidColor=#BarBgColor#,#BarBgTrans#
 BarOrientation=Horizontal
 LeftMouseUpAction=[!CommandMeasure mProgress "SetPosition $MouseX:%$"]
 Group=Controls&Info | BarTrans | BarBgTrans2
[pBarEnd]
 Meter=Image
 ImageName=#@#Images\BarStart.png
 ImageFlip=Horizontal
 X=(([pBar:X])+([pBar:W]/2))
 Y=r
 AntiAlias=1
 ImageTint=#BarBgColor#,#BarBgTrans#
 Group=Controls&Info | BarBgTrans1
[pBarKnob]
 Meter=Image
 ImageName=#@#Images\BarStart.png
 ImageTint=#BarColor#,#BarTrans#
 DynamicVariables=1
 ImageFlip=Horizontal
 X=(([pBar:W]*(([mProgress:%]/100)))+([pBarStart:X]+3))
 Y=r
 AntiAlias=1
 Group=Controls&Info | BarTrans

And if i just do something like [!CommandMeasure mProgress "SetPosition 77"]
It still borks

Screenshot of SoundCloud:
SoundCloudScr.png

I am using the 0.4 plugin and extension:
fileversion.png
SoundCloudUpd.png

Sorry man I was gone for the last few days dealing with some family issues.
I have tested the command extensively on my end and it seems to be working fine no matter what I throw at it. It could be that your skin is somehow using an edge case that youtube handles but you said even a manual normal setPosition failed (Just double checking you are doing everything on a scale of 0 - 100 right?). Could you try inputting the following code into your browser's developer console (Normally accessed by hitting F12)

Code: Select all

progress = function(progress)
{
    var loc = document.getElementsByClassName("playbackTimeline__progressWrapper")[0].getBoundingClientRect();
    progress *= loc.width;

    var a = document.getElementsByClassName("playbackTimeline__progressWrapper")[0];
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('mousedown', true, true, window, 1,
        screenX + loc.left + progress, screenY + loc.top + loc.height / 2,
        loc.left + progress, loc.top + loc.height / 2,
        false, false, false, false, 0, null);
    a.dispatchEvent(e);
    e.initMouseEvent('mouseup', true, true, window, 1,
        screenX + loc.left + progress, screenY + loc.top + loc.height / 2,
        loc.left + progress, loc.top + loc.height / 2,
        false, false, false, false, 0, null);
    a.dispatchEvent(e);
};
progress(0.5);

That should if it works right set the song to 50% through the song. If that does not work tell me the output of document.getElementsByClassName("playbackTimeline__progressWrapper")[0].getBoundingClientRect()

[StArL0rd84]

Inputting the code you provided into my browser's developer console worked and it jumped to 50%.

Tried a to test couple of things in case i did something wrong installing stuff.
- Updated Rainmeter
- Re-downloaded your test skin and copied the plugin into Rainmeter plugins folder.
- tried to mess with your example skin and it either skips to the beginning of the song or to the next song depending on which
button i click. [MeterPositionBack]/[MeterPositionForward]
- Disabled ALL other Chrome extensions in case of a conflict there.
- Reinstalled the Chrome extension.

Since none of those things (Other than injecting the code directly into the browser) made a difference, i don't know what to try next

[tjhrulz]

Click on the album art in that example, does that set it to 50% of the way through the song? Also are progress measures correctly reporting what percent of the way through the song you are? All relative commands rely on that to calculate correctly.

[StArL0rd84]

Click on the album art in that example, does that set it to 50% of the way through the song? Also are progress measures correctly reporting what percent of the way through the song you are? All relative commands rely on that to calculate correctly.

When i click on the album art in the example, it sets it to 0% of the way through the song.
The progress measures are reporting correct percentage.

progress2.png

[eclectic-tech]

{...} and copied the plugin into Rainmeter plugins folder. {...}

Why are you copying the plugin to the Rainmeter plugin folder?
Are you copying it to "AppDate..." or where "Rainmeter.exe" is located?

If you install the test skin, the correct version plugin is copied to the "AppData\Roaming\Rainmeter\Plugins" folder and there is never a need to manually copy the plugin. I think this might be contributing to the problem you are having.

I tested your code using Chrome and Firefox and did not experience any problem; the command moves the song to the desired position.

[StArL0rd84]

If you install the test skin, the correct version plugin is copied to the "AppData\Roaming\Rainmeter\Plugins" folder and there is never a need to manually copy the plugin. I think this might be contributing to the problem you are having.

Deleted the plugin from the plugins folder.
Checked the version in "AppData\Roaming\Rainmeter\Plugins" was indeed 0.4.0.0.
It was, but same result.

I don't use SoundCloud all that often, but if the same code works for you guys, i would feel okay releasing my skin to the public.
Just weird. bet it's something really simple too.

[kyriakos876]

Hello, is it possible to fix the previous command? Youtube must have change something because it doesn't work anymore.

-Thanks in advance.

EDIT: I don't know if you did something, but now it works fine.

[tjhrulz]

Hello, is it possible to fix the previous command? Youtube must have change something because it doesn't work anymore.

-Thanks in advance.

EDIT: I don't know if you did something, but now it works fine.

The previous and next commands on Youtube can be a little hacky, its on a long todo list of mine to improve them (As well as fix Twitch)