Skip to content
This repository has been archived by the owner on Nov 22, 2021. It is now read-only.

Add like status to metadata #148

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add like status to metadata #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
82e0627
add repost option:
rmaes4 Apr 26, 2017
d99faa4
add repost to touchbar and update icons
rmaes4 Apr 26, 2017
7678e53
working like button
rmaes4 Apr 26, 2017
2b09786
clean up code
rmaes4 Apr 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/dock-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ module.exports = function dockMenu(soundcloud) {
soundcloud.likeUnlike()
}
},
{
label: 'Repost',
click() {
soundcloud.repost()
}
},
{
label: 'Next',
click() {
Expand Down
8 changes: 6 additions & 2 deletions app/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,10 @@ app.on('ready', () => {
soundcloud.likeUnlike()
})

menu.events.on('repost', () => {
soundcloud.repost()
})

menu.events.on('nextTrack', () => {
soundcloud.nextTrack()
})
Expand Down Expand Up @@ -188,8 +192,8 @@ app.on('ready', () => {
soundcloud.pause()
})

soundcloud.on('play', ({ title, subtitle, artworkURL }) => {
mainWindow.webContents.send('notification', { title, body: subtitle, icon: artworkURL })
soundcloud.on('play', ({ title, subtitle, trackMetadata }) => {
mainWindow.webContents.send('notification', { title, body: subtitle, icon: trackMetadata.artworkURL })
})

mainWindow.webContents.once('did-start-loading', () => {
Expand Down
7 changes: 7 additions & 0 deletions app/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,13 @@ function buildMenu(options) {
events.emit('likeUnlike')
}
},
{
label: 'Repost',
accelerator: 'R',
click() {
events.emit('repost')
}
},
{
label: 'Next',
accelerator: 'Shift+Right',
Expand Down
13 changes: 12 additions & 1 deletion app/preload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ ipcRenderer.on('notification', (_, metadata) => showNotification(metadata))

function sendTrackMetadata(sender) {
const artworkURL = getArtworkURL()
sender.send('trackMetadata', { artworkURL })
const likeStatus = getLikeStatus()
const trackMetadata = { artworkURL: artworkURL, isLiked: likeStatus }
sender.send('trackMetadata', { trackMetadata })
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI const foo = 'bar'; const baz = { foo } results in the variable baz having a value { foo: 'bar' } therefore what we should have here is something like this:

const artworkURL = getArtworkURL()
const isLiked = getLikeStatus()
sender.send('trackMetadata', { artworkURL, isLiked })

}

function navigate(url) {
Expand All @@ -33,6 +35,15 @@ function getArtworkURL() {
return null
}

function getLikeStatus() {
const liked = document.querySelector('.sc-button-like.playbackSoundBadge__like.sc-button-selected')
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this selector would be less fragile this way: .playbackSoundBadge__actions .playbackSoundBadge__like.sc-button-selected. That would also make it more similar to the one used in getArtworkURL above.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think const selectedLikeButton would better reflect the contents of this variable?

if(liked) {
return true
} else {
return false
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This if/then block can be simplified to !!liked.

}

const Notification = window.Notification
// Disable SoundCloud's own notifications, because:
// - They are not silent on macOS
Expand Down
Binary file modified app/res/like.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/res/liked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/res/next.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/res/pause.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/res/play.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/res/previous.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/res/repost.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/res/reposted.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions app/soundcloud.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ module.exports = class SoundCloud extends Events {
this.trigger('L')
}

repost() {
this.trigger('R')
}

nextTrack() {
this.trigger('J')
}
Expand Down
26 changes: 24 additions & 2 deletions app/touch-bar-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
const { TouchBar } = require('electron')

const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar
const MAX_TITLE_LENGTH = 38
const MAX_TITLE_LENGTH = 39

module.exports = function touchBarMenu(window, soundcloud) {
const nextTrack = new TouchBarButton({
Expand Down Expand Up @@ -31,14 +31,35 @@ module.exports = function touchBarMenu(window, soundcloud) {
icon: `${__dirname}/res/like.png`,
click: () => {
soundcloud.likeUnlike()
toggleLikeUnlikeIcon()
}
})

function toggleLikeUnlikeIcon() {
if(likeUnlike.icon == `${__dirname}/res/like.png`) {
likeUnlike.icon = `${__dirname}/res/liked.png`
} else {
likeUnlike.icon = `${__dirname}/res/like.png`
}
}

const repost = new TouchBarButton({
icon: `${__dirname}/res/repost.png`,
click: () => {
soundcloud.repost()
}
})

const trackInfo = new TouchBarLabel()

soundcloud.on('play', ({ title, subtitle }) => {
soundcloud.on('play', ({ title, subtitle, trackMetadata }) => {
playPause.icon = `${__dirname}/res/pause.png`
trackInfo.label = formatTitle(title, subtitle)
if(trackMetadata.isLiked) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The liked/not liked state management is fundamentally flawed here. The liked state can be changed in many other ways than hitting the like button on TouchBar: users can click (several different) like buttons on SoundCloud itself, use keyboard shortcut, menus, etc. This means the TouchBar like state will only be consistent if the user exclusively uses the TouchBar controls, which is unlikely.

What I would suggest is trying to figure out if we can trigger 'liked' events from SoundCloud (preload.js) independent from what triggered the state change and then implement the button state management in a similar fashion to play/pause management here (eg. soundcloud.on('liked')). One possible means of change detection would be using DOM mutation observers.

I know this sounds complicated but I also think it's not worth merging a half-assed implementation.

Do you think you can figure this out?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your feedback. I'm not used to open source projects/javascript/node so I am trying to learn as I go.

  • The branch was based on the others because I was originally going to try and incorporate the reposted status into the metadata as well.
  • I had no idea about the node linting, I will be sure to do that in the future.
  • You bring up a great point about the liked/not liked state management. I hadn't even thought of that. This would also solve the problem of detecting the repost state. I will look into DOM mutation observers and see if I can figure it out. I think the best approach would be to look for the little pop up in the top right and filter for the text "liked" and "reposted".

likeUnlike.icon = `${__dirname}/res/liked.png`
} else {
likeUnlike.icon = `${__dirname}/res/like.png`
}
})

soundcloud.on('pause', () => {
Expand All @@ -50,6 +71,7 @@ module.exports = function touchBarMenu(window, soundcloud) {
playPause,
nextTrack,
likeUnlike,
repost,
new TouchBarSpacer({ size: 'flexible' }),
trackInfo,
new TouchBarSpacer({ size: 'flexible' })
Expand Down