├── .gitignore ├── assets ├── equalizer_white.gif ├── equalizer_white_pause.gif └── screenshots │ ├── atom-spotified-1.png │ ├── atom-spotified-2.png │ └── atom-spotified-screenshot.png ├── .travis.yml ├── .editorconfig ├── src ├── utils │ ├── constants.js │ ├── scripts │ │ ├── getState.applescript │ │ └── getTrack.applescript │ ├── spotify-applescript.js │ └── spotify-poller.js ├── views │ ├── status-bar-view.js │ └── atom-spotified-view.js └── main.js ├── spec ├── spotify-poller-spec.js └── atom-spotified-spec.js ├── menus └── atom-spotified.cson ├── keymaps └── atom-spotified.cson ├── LICENSE.md ├── package.json ├── CHANGELOG.md ├── README.md └── styles └── atom-spotified.less /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | -------------------------------------------------------------------------------- /assets/equalizer_white.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yianL/atom-spotified/HEAD/assets/equalizer_white.gif -------------------------------------------------------------------------------- /assets/equalizer_white_pause.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yianL/atom-spotified/HEAD/assets/equalizer_white_pause.gif -------------------------------------------------------------------------------- /assets/screenshots/atom-spotified-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yianL/atom-spotified/HEAD/assets/screenshots/atom-spotified-1.png -------------------------------------------------------------------------------- /assets/screenshots/atom-spotified-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yianL/atom-spotified/HEAD/assets/screenshots/atom-spotified-2.png -------------------------------------------------------------------------------- /assets/screenshots/atom-spotified-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yianL/atom-spotified/HEAD/assets/screenshots/atom-spotified-screenshot.png -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: objective-c 2 | 3 | notifications: 4 | email: 5 | on_success: never 6 | on_failure: change 7 | 8 | script: 'curl -s https://raw.githubusercontent.com/atom/ci/master/build-package.sh | sh' 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/utils/constants.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | 3 | export const Mode = { 4 | AUTO: 'Auto', 5 | TREE: 'Tree', 6 | STATUS: 'StatusBar' 7 | } 8 | 9 | export const Errors = { 10 | NO_DATA: 'No data', 11 | JSON_PARSE_ERROR: 'Json parse error' 12 | } 13 | -------------------------------------------------------------------------------- /spec/spotify-poller-spec.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | 3 | import AtomSpotifiedPoller from '../src/utils/spotify-poller' 4 | const poller = new AtomSpotifiedPoller() 5 | 6 | describe('SpotifyPoller', () => { 7 | it('is well tested', () => { 8 | expect(typeof poller.start).toBe('function') 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /menus/atom-spotified.cson: -------------------------------------------------------------------------------- 1 | # See https://atom.io/docs/latest/hacking-atom-package-word-count#menus for more details 2 | 'context-menu': [] 3 | 'menu': [ 4 | { 5 | 'label': 'Packages' 6 | 'submenu': [ 7 | 'label': 'Atom Spotified' 8 | 'submenu': [ 9 | { 10 | 'label': 'Toggle' 11 | 'command': 'atom-spotified:toggle' 12 | } 13 | ] 14 | ] 15 | } 16 | ] 17 | -------------------------------------------------------------------------------- /keymaps/atom-spotified.cson: -------------------------------------------------------------------------------- 1 | # Keybindings require three things to be fully defined: A selector that is 2 | # matched against the focused element, the keystroke and the command to 3 | # execute. 4 | # 5 | # Below is a basic keybinding which registers on all platforms by applying to 6 | # the root workspace element. 7 | 8 | # For more detailed documentation see 9 | # https://atom.io/docs/latest/behind-atom-keymaps-in-depth 10 | 'atom-workspace': 11 | 'ctrl-alt-q': 'atom-spotified:toggle' 12 | -------------------------------------------------------------------------------- /src/utils/scripts/getState.applescript: -------------------------------------------------------------------------------- 1 | # modified from https://github.com/andrehaveman/spotify-node-applescript/blob/master/lib/scripts/get_state.applescript 2 | if application "Spotify" is running then 3 | tell application "Spotify" 4 | set cstate to "{" 5 | set cstate to cstate & "\"track_id\": \"" & current track's id & "\"" 6 | set cstate to cstate & ",\"volume\": " & sound volume 7 | set cstate to cstate & ",\"position\": " & (player position as integer) 8 | set cstate to cstate & ",\"state\": \"" & player state & "\"" 9 | set cstate to cstate & "}" 10 | 11 | return cstate 12 | end tell 13 | else 14 | return "" 15 | end if 16 | -------------------------------------------------------------------------------- /src/utils/spotify-applescript.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | 3 | import util from 'util' 4 | import { exec } from 'child_process' 5 | import applescript from 'applescript' 6 | import { Errors } from './constants' 7 | 8 | const runscript = (file) => new Promise((resolve, reject) => { 9 | applescript.execFile(file, (error, result) => { 10 | if (error) { reject(error) } 11 | 12 | try { 13 | if (result) { 14 | resolve(JSON.parse(result)) 15 | } else { 16 | reject(new Error(Errors.NO_DATA)) 17 | } 18 | } catch (e) { 19 | reject(new Error(Errors.JSON_PARSE_ERROR)) 20 | } 21 | 22 | }); 23 | }) 24 | 25 | const getState = () => runscript(`${__dirname}/scripts/getState.applescript`) 26 | const getTrack = () => runscript(`${__dirname}/scripts/getTrack.applescript`) 27 | 28 | export default { 29 | getState, 30 | getTrack 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 YI-AN LAI 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /src/utils/scripts/getTrack.applescript: -------------------------------------------------------------------------------- 1 | # modified from https://github.com/andrehaveman/spotify-node-applescript/blob/master/lib/scripts/get_track.applescript 2 | on escape_quotes(string_to_escape) 3 | set AppleScript's text item delimiters to the "\"" 4 | set the item_list to every text item of string_to_escape 5 | set AppleScript's text item delimiters to the "\\\"" 6 | set string_to_escape to the item_list as string 7 | set AppleScript's text item delimiters to "" 8 | return string_to_escape 9 | end escape_quotes 10 | 11 | if application "Spotify" is running then 12 | tell application "Spotify" 13 | set ctrack to "{" 14 | set ctrack to ctrack & "\"artist\": \"" & my escape_quotes(current track's artist) & "\"" 15 | set ctrack to ctrack & ",\"album\": \"" & my escape_quotes(current track's album) & "\"" 16 | set ctrack to ctrack & ",\"disc_number\": " & current track's disc number 17 | set ctrack to ctrack & ",\"duration\": " & current track's duration 18 | set ctrack to ctrack & ",\"played_count\": " & current track's played count 19 | set ctrack to ctrack & ",\"track_number\": " & current track's track number 20 | set ctrack to ctrack & ",\"popularity\": " & current track's popularity 21 | set ctrack to ctrack & ",\"id\": \"" & current track's id & "\"" 22 | set ctrack to ctrack & ",\"name\": \"" & my escape_quotes(current track's name) & "\"" 23 | set ctrack to ctrack & ",\"album_artist\": \"" & my escape_quotes(current track's album artist) & "\"" 24 | set ctrack to ctrack & ",\"artwork_url\": \"" & current track's artwork url & "\"" 25 | set ctrack to ctrack & ",\"spotify_url\": \"" & current track's spotify url & "\"" 26 | set ctrack to ctrack & "}" 27 | return ctrack 28 | end tell 29 | else 30 | return "" 31 | end if 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom-spotified", 3 | "main": "./src/main", 4 | "version": "0.8.3", 5 | "description": "Show the song currently playing in Spotify", 6 | "keywords": [ 7 | "spotify", 8 | "music", 9 | "cover-art" 10 | ], 11 | "os": [ 12 | "darwin" 13 | ], 14 | "repository": "https://github.com/yianL/atom-spotified", 15 | "license": "MIT", 16 | "engines": { 17 | "atom": ">=1.0.0" 18 | }, 19 | "dependencies": { 20 | "classnames": "^2.2.5", 21 | "dom-listener": "^0.1.2", 22 | "etch": "^0.6.0", 23 | "applescript": "^1.0.0" 24 | }, 25 | "devDependencies": { 26 | "standard": "^6.0.8" 27 | }, 28 | "configSchema": { 29 | "mode": { 30 | "type": "string", 31 | "default": "Auto", 32 | "enum": [ 33 | "Auto", 34 | "Tree", 35 | "StatusBar" 36 | ], 37 | "description": "*Reload required" 38 | }, 39 | "showSoundBar": { 40 | "type": "boolean", 41 | "default": true, 42 | "description": "Show sound bar animation" 43 | }, 44 | "statusBarViewPosition": { 45 | "type": "string", 46 | "default": "right", 47 | "enum": [ 48 | "right", 49 | "left" 50 | ], 51 | "description": "The position of the status bar view" 52 | }, 53 | "statusBarViewPriority": { 54 | "type": "integer", 55 | "default": 1000, 56 | "description": "Controls the position of the status bar view" 57 | } 58 | }, 59 | "consumedServices": { 60 | "status-bar": { 61 | "versions": { 62 | ">=0.2.0": "consumeStatusBar" 63 | } 64 | } 65 | }, 66 | "standard": { 67 | "globals": [ 68 | "atom", 69 | "beforeEach", 70 | "describe", 71 | "expect", 72 | "fetch", 73 | "HTMLElement", 74 | "it", 75 | "jasmine", 76 | "runs", 77 | "spyOn", 78 | "waits", 79 | "waitsForPromise" 80 | ] 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /spec/atom-spotified-spec.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | 3 | describe('AtomSpotified', () => { 4 | let workspaceElement 5 | 6 | beforeEach(() => { 7 | waitsForPromise(() => atom.packages.activatePackage('tree-view')) 8 | waitsForPromise(() => atom.packages.activatePackage('status-bar')) 9 | 10 | workspaceElement = atom.views.getView(atom.workspace) 11 | jasmine.attachToDOM(workspaceElement) 12 | 13 | waitsForPromise(() => atom.packages.activatePackage('atom-spotified')) 14 | }) 15 | 16 | describe('when TreeView is active', () => { 17 | it('shows the atom-spotified-view', () => { 18 | const elem = workspaceElement.querySelector('.atom-spotified') 19 | expect(elem).toBeVisible() 20 | }) 21 | 22 | it('does not show the status-bar-view', () => { 23 | const elem = workspaceElement.querySelector('.atom-spotified-status') 24 | expect(elem).toBe(null) 25 | }) 26 | 27 | // describe('when atom-spotified:toggle event is triggered', () => { 28 | // beforeEach(async () => { 29 | // await atom.commands.dispatch(workspaceElement, 'atom-spotified:toggle') 30 | // }) 31 | // 32 | // it('hides the view', () => { 33 | // const elem = workspaceElement.querySelector('.atom-spotified') 34 | // expect(elem).not.toBeVisible() 35 | // }) 36 | // }) 37 | }) 38 | 39 | describe('when TreeView is inactive', () => { 40 | beforeEach(() => { 41 | // toggle the tree view to hide it 42 | atom.commands.dispatch(workspaceElement, 'tree-view:toggle') 43 | }) 44 | 45 | // it('does not show the atom-spotified-view', () => { 46 | // const elem = workspaceElement.querySelector('.atom-spotified') 47 | // expect(elem).toBe(null) 48 | // }) 49 | 50 | it('shows the status-bar-view', () => { 51 | const elem = workspaceElement.querySelector('.atom-spotified-status') 52 | expect(elem).toBeVisible() 53 | }) 54 | 55 | // describe('when atom-spotified:toggle event is triggered', () => { 56 | // it('hides and shows the view', () => { 57 | // const elem = workspaceElement.querySelector('.atom-spotified-status') 58 | // expect(elem).toBeVisible() 59 | // atom.commands.dispatch(workspaceElement, 'atom-spotified:toggle') 60 | // expect(elem).not.toBeVisible() 61 | // }) 62 | // }) 63 | }) 64 | }) 65 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.8.3 2 | * Auto mode works correctly when using the left dock-panel toggle to toggle the tree view. 3 | 4 | ## 0.8.2 5 | * Remove dependency on font-awesome. (#14) 6 | 7 | ## 0.8.1 8 | * Remove Spotify Web Api call. (#13) 9 | 10 | ## 0.8.0 11 | * Fix compatibility issue with Atom 1.17 and up. (#12) 12 | * Display non-square cover art without stretching. (#11) 13 | 14 | ## 0.7.1 15 | * Fix compatibility issue with Nuclide 0.189.0 and up. 16 | 17 | ## 0.7.0 18 | * **atom-spotified** now plays nicely with [Nuclide](https://nuclide.io/) file tree. :tada: 19 | 20 | I've switched to Nuclide months ago, and really enjoyed some of the features it provides such as flow integration, working sets, and smarter autocomplete suggestions (thanks to flow). But Nuclide comes with a different tree-view implementation that is a completely separate package from the native atom file-tree, and prevented this package from working properly. 21 | 22 | Worry no more! This update fixes the issue with `nuclide-file-tree` and you can continue to enjoy your spotify view along with the awesome Nuclide file tree! 23 | 24 | ## 0.6.0 25 | * Using "atom-spotified" package will no longer auto-start Spotify for you (#8) 26 | * Status of atom-spotified will be surfaced through hover tooltips (Spotify is running/not running) 27 | 28 | **chores**: 29 | * Removed dependency `spotify-node-applescript`, and reimplemented similar functionality with Promise-based API. 30 | 31 | ## 0.5.0 32 | * Add `mode` option 33 | 34 | ## 0.4.0 35 | * UI components rewritten in atom/etch, so they are way easier to exxtend & customize now 36 | * Added spotify style cover-art toggle. Probably not too useful, but it's super cool :tada: 37 | * Hide soundbar animation config now affect statusBarView as well 38 | 39 | ## 0.3.1 - Patch Release 40 | * Remove document.registerElement() to prevent namespace collision when upgrading package 41 | 42 | ## 0.3.0 - Minor Release 43 | * Add CI 44 | * Add more config options for status bar view 45 | 46 | ## 0.2.1 - Patch Release 47 | * Recover from error state automatically 48 | 49 | ## 0.2.0 - Minor Release 50 | * Add status bar view (when treeView is hidden) 51 | * Add Spotify poller service (not exposed as external service yet) 52 | 53 | ## 0.1.2 - Patch Release 54 | * Rewrite in ES6 55 | 56 | ## 0.1.1 - Patch Release 57 | * Improve offline handling 58 | 59 | ## 0.1.0 - First Release 60 | * Show current song & album art at the bottom of tree view 61 | -------------------------------------------------------------------------------- /src/views/status-bar-view.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | /** @jsx etch.dom */ 3 | 4 | import etch from 'etch' 5 | import DOMListener from 'dom-listener' 6 | import classNames from 'classnames' 7 | import { CompositeDisposable } from 'atom' 8 | 9 | /* 10 | propTypes = { 11 | showSoundBar: bool, 12 | visible: bool, 13 | trackInfo: { 14 | name: string, 15 | artist: string, 16 | cover: string, 17 | state: oneOf('playing', 'paused', 'error') 18 | } 19 | } 20 | */ 21 | export default class StatusBarView { 22 | 23 | constructor (props, children) { 24 | this.props = { 25 | showSoundBar: atom.config.get('atom-spotified.showSoundBar'), 26 | visible: true, 27 | trackInfo: {}, 28 | } 29 | 30 | // initial render of component 31 | etch.initialize(this) 32 | 33 | atom.config.observe('atom-spotified.showSoundBar', (value) => this.update({showSoundBar: value})) 34 | 35 | // setup subscriptions 36 | this.subscriptions = new CompositeDisposable() 37 | this.subscriptions.add( 38 | atom.tooltips.add(this.refs.name, { 39 | title: () => this.props.message || `${this.props.trackInfo.name} - ${this.props.trackInfo.artist}` 40 | }) 41 | ) 42 | } 43 | 44 | toggleCover () { 45 | const { showLargeCover } = this.props 46 | this.update({showLargeCover: !showLargeCover}) 47 | } 48 | 49 | render () { 50 | const { showSoundBar, visible } = this.props 51 | const { name, cover, artist, state } = this.props.trackInfo 52 | 53 | const soundbarImg = state === 'playing' 54 | ? 'atom://atom-spotified/assets/equalizer_white.gif' 55 | : 'atom://atom-spotified/assets/equalizer_white_pause.gif' 56 | 57 | return ( 58 |
59 | {showSoundBar 60 | ? 61 | : } 62 | 66 | {name ? `${name} - ${artist}` : 'Atom Spotified'} 67 | 68 |
69 | ) 70 | } 71 | 72 | update (props, children) { 73 | // shallow update 74 | for (var key in props) { 75 | this.props[key] = props[key] 76 | } 77 | return etch.update(this) 78 | } 79 | 80 | async destroy () { 81 | await etch.destroy(this) 82 | this.subscriptions.dispose() 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :musical_note: Atom-Spotified [![Build Status](https://travis-ci.org/yianL/atom-spotified.svg?branch=master)](https://travis-ci.org/yianL/atom-spotified) 2 | 3 | For all the Atom & Spotify lovers out there! This plugin shows the song currently playing in Spotify. 4 | Switch between the tree view, or the status bar view, when the tree view is hidden: 5 | 6 | Tree (Spotify style) | Status Bar 7 | -----------------------|------------------- 8 | ![TreeView mode](https://raw.githubusercontent.com/yianL/atom-spotified/master/assets/screenshots/atom-spotified-1.png) | ![StatusBar mode](https://raw.githubusercontent.com/yianL/atom-spotified/master/assets/screenshots/atom-spotified-2.png) 9 | 10 | ## Usage 11 | 12 | :warning: Only OSX is supported at this moment since the package requires AppleScript to interact with Spotify. 13 | 14 | **Update (2016-11-16)**: This package is compatible with [Nuclide](https://nuclide.io/). Checkout the release note: [0.7.0](https://github.com/yianL/atom-spotified/blob/master/CHANGELOG.md#070) 15 | 16 | ### Commands 17 | 18 | Command | Description 19 | ------------------------|-------------- 20 | `atom-spotified:toggle` | Toggles (show/hide) the widget that displays the current track and album art. 21 | 22 | ### Keybindings 23 | 24 | Command | Linux | OS X | Windows 25 | -------------------|--------|-------|---------- 26 | `atom-spotified:toggle` | *Not Supported* | Ctrl-Alt-q | *Not Supported* 27 | 28 | Custom keybindings can be added by referencing the above commands. 29 | 30 | ### Configuration 31 | 32 | Configuration Key Path | Type | Default | Description 33 | ----------------------------|------|---------|------------ 34 | `atom-spotified:mode` | `string` | `Auto` | 35 | `atom-spotified:showSoundBar` | `boolean` | `true` | Whether to show the equalizer animation or not. 36 | `atom-spotified:statusBarViewPosition` | `string` | `right` | Position of the statusBarView 37 | `atom-spotified:statusBarViewPriority` | `integer` | `1000` | Affects the order of which statusBarView appears in the status bar 38 | 39 | ## Contributing 40 | 41 | PRs, bug reports, and feature requests are always welcomed! 42 | 43 | ## License 44 | 45 | [MIT License](http://opensource.org/licenses/MIT) - see the [LICENSE](https://github.com/yianL/atom-spotified/blob/master/LICENSE.md) for more details. 46 | -------------------------------------------------------------------------------- /styles/atom-spotified.less: -------------------------------------------------------------------------------- 1 | // The ui-variables file is provided by base themes provided by Atom. 2 | // 3 | // See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less 4 | // for a full listing of what's available. 5 | @import "ui-variables"; 6 | 7 | @cover-thumbnail-size: 56px; 8 | 9 | .atom-spotified, 10 | .atom-spotified-status { 11 | position: relative; 12 | 13 | .player-state { 14 | height: 12px; 15 | width: 12px; 16 | opacity: .6; 17 | } 18 | } 19 | 20 | .atom-spotified { 21 | border-top: 1px solid @tree-view-border-color; 22 | border-bottom: 1px solid @tree-view-border-color; 23 | width: 100%; 24 | 25 | &.large-cover { 26 | .info .track-info { 27 | margin-left: 0; 28 | } 29 | } 30 | 31 | .cover { 32 | position: absolute; 33 | width: @cover-thumbnail-size; 34 | height: @cover-thumbnail-size; 35 | top: 0; 36 | left: 0; 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | 41 | .fa-spotify { 42 | font-size: 48px; 43 | } 44 | 45 | img { 46 | height: 100%; 47 | } 48 | } 49 | 50 | .cover-2 { 51 | position: relative; 52 | 53 | .fa-spotify { 54 | width: 100%; 55 | font-size: 100px; 56 | } 57 | 58 | img { 59 | width: 100%; 60 | } 61 | } 62 | 63 | .info { 64 | width: 100%; 65 | overflow: hidden; 66 | 67 | .track-info { 68 | transition: margin .1s ease-out; 69 | margin-left: @cover-thumbnail-size; 70 | background-color: @tree-view-background-color; 71 | padding: 10px 7px; 72 | height: @cover-thumbnail-size; 73 | z-index: 5; 74 | position: relative; 75 | } 76 | 77 | .name, .artist { 78 | text-overflow: ellipsis; 79 | overflow: hidden; 80 | white-space: nowrap; 81 | } 82 | 83 | .name { 84 | font-weight: 400; 85 | font-size: 13px; 86 | } 87 | 88 | .artist { 89 | font-size: 12px; 90 | } 91 | 92 | .player-state { 93 | position: absolute; 94 | z-index: 10; 95 | bottom: 0; 96 | right: 0; 97 | } 98 | } 99 | 100 | .toggle { 101 | position: absolute; 102 | width: 18px; 103 | height: 18px; 104 | right: 2px; 105 | top: 2px; 106 | border-radius: 3px; 107 | color: white; 108 | background-color: #333; 109 | opacity: 0; 110 | cursor: pointer; 111 | transition: opacity .2s ease-out; 112 | display: flex; 113 | align-items: center; 114 | justify-content: center; 115 | font-size: 13px; 116 | 117 | &:hover { 118 | opacity: .9 !important; 119 | } 120 | 121 | .icon::before { 122 | margin: 0; 123 | } 124 | } 125 | 126 | .cover, 127 | .cover-2 { 128 | &:hover .toggle { 129 | opacity: .4; 130 | } 131 | } 132 | } 133 | 134 | .atom-spotified-status { 135 | .player-state, 136 | .fa { 137 | margin-right: 2px; 138 | } 139 | a.inline-block { 140 | overflow: hidden; 141 | text-overflow: ellipsis; 142 | max-width: 100%; 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /src/utils/spotify-poller.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | 3 | import spotify from './spotify-applescript' 4 | import { Errors } from './constants' 5 | 6 | export default class AtomSpotifiedPoller { 7 | constructor () { 8 | this.trackInfo = {} 9 | this.subscriptions = [] 10 | this.retryCount = 0 11 | this.state = 'stopped' 12 | } 13 | 14 | start () { 15 | setTimeout(() => this.updateTrackInfo()) 16 | this.poller = setInterval(() => this.updateTrackInfo(), 5000) 17 | this.state = 'started' 18 | this.subscriptions.forEach((cb) => cb({ 19 | message: 'Initializing..' 20 | })) 21 | } 22 | 23 | stop () { 24 | clearInterval(this.poller) 25 | this.state = 'stopped' 26 | } 27 | 28 | updateTrackInfo () { 29 | spotify.getState() 30 | .then((state) => { 31 | const trackId = state.track_id.split(':')[2] 32 | 33 | if (trackId === this.trackInfo.id) { 34 | // same track update player state if needed 35 | return (state.state !== this.trackInfo.state) && this.handleUpdate({ state: state.state }) 36 | } 37 | 38 | // use applescript info 39 | spotify.getTrack() 40 | .then((track) => this.handleUpdate({ 41 | state: state.state, 42 | id: trackId, 43 | name: track.name, 44 | artist: track.artist, 45 | cover: track.artwork_url, 46 | })) 47 | .catch((error) => this.handleError(error)) 48 | 49 | }) 50 | .catch((error) => { 51 | // cannot get player state 52 | return this.handleError(error) 53 | }) 54 | } 55 | 56 | addSubscriber (cb) { 57 | this.subscriptions.push(cb) 58 | } 59 | 60 | removeSubscriber (cb) { 61 | const idx = this.subscriptions.indexOf(cb) 62 | 63 | if (idx > -1) { 64 | this.subscriptions.splice(idx, 1) 65 | } 66 | } 67 | 68 | handleUpdate ({ state, id, name, artist, cover }) { 69 | this.retryCount = 0 70 | this.trackInfo.id = id || this.trackInfo.id 71 | this.trackInfo.state = state || this.trackInfo.state 72 | this.trackInfo.name = name || this.trackInfo.name 73 | this.trackInfo.artist = artist || this.trackInfo.artist 74 | this.trackInfo.cover = cover || this.trackInfo.cover 75 | 76 | this.subscriptions.forEach((cb) => cb({ 77 | trackInfo: this.trackInfo, 78 | message: undefined 79 | })) 80 | } 81 | 82 | handleError (error) { 83 | switch (error.message) { 84 | case Errors.NO_DATA: 85 | if(this.retryCount++ > 2) { 86 | this.subscriptions.forEach((cb) => cb({ 87 | trackInfo: { 88 | state: 'paused' 89 | }, 90 | message: 'Spotify is not running' 91 | })) 92 | } 93 | break; 94 | 95 | default: 96 | // unhandled errors 97 | console.error('atom-spotified error:', error) 98 | 99 | if (this.retryCount > 3 && this.trackInfo.id) { 100 | this.subscriptions.forEach((cb) => cb({ 101 | trackInfo: { 102 | state: 'error' 103 | }, 104 | message: 'Failed to get track info' 105 | })) 106 | delete this.trackInfo.id 107 | } else { 108 | this.retryCount++ 109 | } 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/views/atom-spotified-view.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | /** @jsx etch.dom */ 3 | 4 | import etch from 'etch' 5 | import DOMListener from 'dom-listener' 6 | import classNames from 'classnames' 7 | import { CompositeDisposable } from 'atom' 8 | 9 | /* 10 | propTypes = { 11 | showSoundBar: bool, 12 | showLargeCover: bool, 13 | visible: bool, 14 | trackInfo: { 15 | name: string, 16 | artist: string, 17 | cover: string, 18 | state: oneOf('playing', 'paused', 'error') 19 | } 20 | } 21 | */ 22 | export default class AtomSpotifiedView { 23 | 24 | constructor (props, children) { 25 | this.props = { 26 | showSoundBar: atom.config.get('atom-spotified.showSoundBar'), 27 | showLargeCover: false, 28 | visible: true, 29 | trackInfo: {}, 30 | } 31 | 32 | // initial render of component 33 | etch.initialize(this) 34 | 35 | // setup event listeners 36 | this.listener = new DOMListener(this.element) 37 | this.listener.add('.toggle', 'click', this.toggleCover.bind(this)) 38 | 39 | atom.config.observe('atom-spotified.showSoundBar', (value) => this.update({showSoundBar: value})) 40 | 41 | // setup subscriptions 42 | this.subscriptions = new CompositeDisposable() 43 | this.subscriptions.add( 44 | atom.tooltips.add(this.refs.name, { 45 | title: () => this.props.message || `${this.props.trackInfo.name} - ${this.props.trackInfo.artist}` 46 | }) 47 | ) 48 | } 49 | 50 | toggleCover () { 51 | const { showLargeCover } = this.props 52 | this.update({showLargeCover: !showLargeCover}) 53 | } 54 | 55 | render () { 56 | const { showSoundBar, visible, showLargeCover } = this.props 57 | const { name, cover, artist, state } = this.props.trackInfo 58 | 59 | return ( 60 |
61 |
62 | {cover 63 | ? 64 | : } 65 |
66 | 67 |
68 |
69 |
70 |
71 | {cover 72 | ? 73 | : } 74 |
75 | 76 |
77 |
78 | 79 |
80 |
81 | {name || 'Spotified'} 82 |
83 |
84 | {artist || 'Atom'} 85 |
86 |
87 | 93 |
94 |
95 | ) 96 | } 97 | 98 | update (props, children) { 99 | // shallow update 100 | for (var key in props) { 101 | this.props[key] = props[key] 102 | } 103 | return etch.update(this) 104 | } 105 | 106 | async destroy () { 107 | await etch.destroy(this) 108 | this.subscriptions.dispose() 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | 'use babel' 2 | 3 | import { CompositeDisposable } from 'atom' 4 | 5 | import AtomSpotifiedPoller from './utils/spotify-poller' 6 | import AtomSpotifiedView from './views/atom-spotified-view' 7 | import StatusBarView from './views/status-bar-view' 8 | import { Mode } from './utils/constants' 9 | 10 | const AtomSpotified = { 11 | 12 | activate: (state) => { 13 | // initialize variables 14 | const config = atom.config.get('atom-spotified') 15 | 16 | this.showStatus = false 17 | this.viewAppended = false 18 | this.visible = true 19 | 20 | this.subscriptions = new CompositeDisposable() 21 | this.poller = new AtomSpotifiedPoller() 22 | this.atomSpotifiedView = new AtomSpotifiedView() 23 | this.statusBarView = new StatusBarView() 24 | this.updateStatusView = updateStatusView.bind(this) 25 | this.handleTreeToggle = handleTreeToggle.bind(this) 26 | this.addStatusBarView = addStatusBarView.bind(this) 27 | this.addTreeView = addTreeView.bind(this) 28 | 29 | this.poller.addSubscriber(this.atomSpotifiedView.update.bind(this.atomSpotifiedView)) 30 | this.poller.addSubscriber(this.statusBarView.update.bind(this.statusBarView)) 31 | 32 | const packageDependencies = [ 33 | 'status-bar', 34 | ] 35 | if (atom.packages.isPackageActive('tree-view')) { packageDependencies.push('tree-view') } 36 | if (atom.packages.isPackageActive('nuclide-file-tree')) { packageDependencies.push('nuclide-file-tree') } 37 | 38 | const packageActivationPromises = packageDependencies.map((packageName) => atom.packages.activatePackage(packageName)) 39 | 40 | Promise.all(packageActivationPromises) 41 | .then(([statusBarPkg]) => { 42 | switch (config.mode) { 43 | case Mode.STATUS: 44 | this.statusBarTile = this.addStatusBarView() 45 | break 46 | 47 | case Mode.TREE: 48 | this.addTreeView() 49 | break 50 | 51 | case Mode.AUTO: 52 | default: 53 | if (isSidePaneVisible()) { 54 | this.addTreeView() 55 | } else { 56 | this.statusBarTile = this.addStatusBarView() 57 | } 58 | } 59 | 60 | this.leftDockToggle = document.getElementsByClassName("atom-dock-toggle-button left")[0] 61 | this.leftDockToggle.addEventListener('click', this.handleTreeToggle) 62 | }) 63 | 64 | // Register command that toggles this view 65 | this.subscriptions.add( 66 | atom.commands.add('atom-workspace', 'atom-spotified:toggle', () => { 67 | this.visible = !this.visible 68 | 69 | return this.showStatus 70 | ? this.statusBarView.update({visible: this.visible}) 71 | : this.atomSpotifiedView.update({visible: this.visible}) 72 | }) 73 | ) 74 | 75 | // Monitor tree-view toggle events 76 | this.subscriptions.add( 77 | atom.commands.onDidDispatch((command) => { 78 | if (command.type === 'tree-view:toggle' || 79 | command.type === 'nuclide-file-tree:toggle' || 80 | command.type === 'window:toggle-left-dock') { 81 | this.handleTreeToggle() 82 | } 83 | }) 84 | ) 85 | 86 | atom.config.observe('atom-spotified.statusBarViewPosition', this.updateStatusView) 87 | atom.config.observe('atom-spotified.statusBarViewPriority', this.updateStatusView) 88 | 89 | this.poller.start() 90 | 91 | function getSidePanel () { 92 | const oldNuclidePane = document.getElementsByClassName('nuclide-side-bar-tab-container')[0] 93 | const atomTreeViewPane = 94 | document.getElementsByClassName('tree-view-resizer')[0] || // atom < 1.17 95 | Array.prototype.filter.call( // atom >= 1.17 96 | document.getElementsByTagName('atom-dock'), 97 | e => e.classList.contains('left') 98 | )[0] 99 | const newNuclidePane = atomTreeViewPane ? atomTreeViewPane.getElementsByTagName('atom-pane')[0] : undefined 100 | return newNuclidePane || oldNuclidePane || atomTreeViewPane 101 | } 102 | 103 | function addTreeView () { 104 | const sidePanel = getSidePanel() 105 | if (sidePanel) { 106 | sidePanel.appendChild(this.atomSpotifiedView.element) 107 | this.viewAppended = true 108 | this.showStatus = false 109 | } 110 | } 111 | 112 | function isSidePaneVisible() { 113 | return getSidePanel() && document.getElementsByClassName("atom-dock-open left").length 114 | } 115 | 116 | function handleTreeToggle () { 117 | switch (config.mode) { 118 | case Mode.TREE: 119 | if (!this.viewAppended) { this.addTreeView() } 120 | break 121 | 122 | case Mode.STATUS: 123 | break 124 | 125 | case Mode.AUTO: 126 | default: 127 | if (this.showStatus) { 128 | if (!this.viewAppended) { this.addTreeView() } 129 | this.statusBarTile && this.statusBarTile.destroy() 130 | this.statusBarTile = null 131 | this.showStatus = false 132 | } else { 133 | this.statusBarTile = this.addStatusBarView() 134 | } 135 | } 136 | } 137 | 138 | function addStatusBarView () { 139 | const tile = { 140 | item: this.statusBarView.element, 141 | priority: atom.config.get('atom-spotified.statusBarViewPriority') 142 | } 143 | this.showStatus = true 144 | 145 | return atom.config.get('atom-spotified.statusBarViewPosition') === 'right' 146 | ? this.statusBar.addRightTile(tile) 147 | : this.statusBar.addLeftTile(tile) 148 | } 149 | 150 | function updateStatusView () { 151 | if (this.showStatus) { 152 | this.statusBarTile && this.statusBarTile.destroy() 153 | this.statusBarTile = this.addStatusBarView() 154 | } 155 | } 156 | }, 157 | 158 | deactivate: () => { 159 | this.subscriptions.dispose() 160 | this.atomSpotifiedView.destroy() 161 | this.statusBarTile && this.statusBarTile.destroy() 162 | this.statusBarView.destroy() 163 | if (this.leftDockToggle) { 164 | this.leftDockToggle.removeEventListener('click', this.handleTreeToggle) 165 | } 166 | }, 167 | 168 | serialize: () => ({}), 169 | 170 | consumeStatusBar: (statusBar) => { 171 | this.statusBar = statusBar 172 | } 173 | } 174 | 175 | export default AtomSpotified 176 | --------------------------------------------------------------------------------