├── .gitignore ├── .idea ├── electron-spotify.iml ├── misc.xml ├── modules.xml ├── vcs.xml └── workspace.xml ├── LICENSE.md ├── README.md ├── app ├── css │ └── index.css ├── generate-playlists.html ├── home.html ├── index.html └── js │ ├── generate-playlists.js │ ├── home.js │ └── index.js ├── assets ├── defaultplaylist.png ├── defaultsong.png ├── defaultuser.png └── turing.png ├── main.js ├── package-lock.json ├── package.json ├── preload.js └── renderer.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.idea/electron-spotify.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 146 | 147 | 148 | 149 | jquer 150 | login-reg 151 | Widevine 152 | login-form 153 | spo 154 | SPO 155 | tr 156 | redir-wrap 157 | clearPlaylist 158 | songlist-tab 159 | playlistDiv 160 | get-playlists-button 161 | openPlaylist 162 | playlist-open 163 | 164 | 165 | 166 | 172 | 173 | 174 | 189 | 190 | 191 | 192 | 193 | 194 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 1565718137850 294 | 307 | 308 | 1566351492243 309 | 314 | 315 | 1567470695456 316 | 321 | 324 | 325 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 356 | 357 | 358 | 359 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 466 | 467 | 468 | 469 | 470 | 471 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | ================== 3 | 4 | Statement of Purpose 5 | --------------------- 6 | 7 | The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an "owner") of an original work of authorship and/or a database (each, a "Work"). 8 | 9 | Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works ("Commons") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others. 10 | 11 | For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the "Affirmer"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights. 12 | 13 | 1. Copyright and Related Rights. 14 | -------------------------------- 15 | A Work made available under CC0 may be protected by copyright and related or neighboring rights ("Copyright and Related Rights"). Copyright and Related Rights include, but are not limited to, the following: 16 | 17 | i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work; 18 | ii. moral rights retained by the original author(s) and/or performer(s); 19 | iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work; 20 | iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below; 21 | v. rights protecting the extraction, dissemination, use and reuse of data in a Work; 22 | vi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and 23 | vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof. 24 | 25 | 2. Waiver. 26 | ----------- 27 | To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose. 28 | 29 | 3. Public License Fallback. 30 | ---------------------------- 31 | Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the "License"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose. 32 | 33 | 4. Limitations and Disclaimers. 34 | -------------------------------- 35 | 36 | a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document. 37 | b. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law. 38 | c. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work. 39 | d. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work. 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # electron-spotify 2 | 3 | **The basis for the Turing Club's Spotify AI project!** 4 | 5 | **Clone and run for a quick way to see Electron in action.** 6 | 7 | This is a minimal Electron application based on the [Quick Start Guide](https://electronjs.org/docs/tutorial/quick-start) within the Electron documentation. 8 | 9 | **Use this app along with the [Electron API Demos](https://electronjs.org/#get-started) app for API code examples to help you get started.** 10 | 11 | A basic Electron application needs just these files: 12 | 13 | - `package.json` - Points to the app's main file and lists its details and dependencies. 14 | - `main.js` - Starts the app and creates a browser window to render HTML. This is the app's **main process**. 15 | - `index.html` - A web page to render. This is the app's **renderer process**. 16 | 17 | You can learn more about each of these components within the [Quick Start Guide](https://electronjs.org/docs/tutorial/quick-start). 18 | 19 | ## To Use 20 | 21 | To clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line: 22 | 23 | ```bash 24 | # Clone this repository 25 | git clone https://github.com/turing-club/electron-spotify 26 | # Go into the repository 27 | cd electron-spotify 28 | # Install dependencies 29 | npm install 30 | # Run the app 31 | npm start 32 | ``` 33 | 34 | Note: If you're using Linux Bash for Windows, [see this guide](https://www.howtogeek.com/261575/how-to-run-graphical-linux-desktop-applications-from-windows-10s-bash-shell/) or use `node` from the command prompt. 35 | 36 | ## Resources for Learning Electron 37 | 38 | - [electronjs.org/docs](https://electronjs.org/docs) - all of Electron's documentation 39 | - [electronjs.org/community#boilerplates](https://electronjs.org/community#boilerplates) - sample starter apps created by the community 40 | - [electron/electron-quick-start](https://github.com/electron/electron-quick-start) - a very basic starter Electron app 41 | - [electron/simple-samples](https://github.com/electron/simple-samples) - small applications with ideas for taking them further 42 | - [electron/electron-api-demos](https://github.com/electron/electron-api-demos) - an Electron app that teaches you how to use Electron 43 | - [hokein/electron-sample-apps](https://github.com/hokein/electron-sample-apps) - small demo apps for the various Electron APIs 44 | 45 | ## License 46 | 47 | [CC0 1.0 (Public Domain)](LICENSE.md) 48 | -------------------------------------------------------------------------------- /app/css/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 14px; 3 | } 4 | 5 | .material-icons.md-14 { font-size: 14px; } 6 | .material-icons.md-18 { font-size: 18px; } 7 | .material-icons.md-btn { cursor: pointer; } 8 | 9 | /* Reusable Classes */ 10 | 11 | .c--flex-center { 12 | align-items: center; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | } 17 | 18 | .b--back { 19 | align-self: center; 20 | cursor: pointer; 21 | } 22 | .b--back:hover { 23 | transform: scale(1.1); 24 | } 25 | 26 | .b--side { 27 | cursor: pointer; 28 | float: unset; 29 | } 30 | .b--side:hover { 31 | transform: scale(1.1); 32 | } 33 | 34 | 35 | /* Components */ 36 | .main-info { 37 | padding-top: 15vh; 38 | } 39 | 40 | .form-signin { 41 | margin: 0 auto; 42 | max-width: 50vw; 43 | /*padding-top: 10vh;*/ 44 | text-align: center; 45 | } 46 | 47 | .button-signin { 48 | width: 100%; 49 | } 50 | 51 | .songlist__table td { 52 | vertical-align: middle; 53 | } 54 | .songlist__table th { 55 | vertical-align: middle; 56 | } 57 | 58 | .songlist__table__img { 59 | height: 4em; 60 | width: 4em; 61 | } 62 | 63 | .songlist__table-num { 64 | width: 3em; 65 | } 66 | .songlist__table-img { 67 | width: 6em; 68 | } 69 | .songlist__table__rating { 70 | min-width: 12em; 71 | } 72 | 73 | .b--right { 74 | text-align: right; 75 | } 76 | .t--center { 77 | text-align: center; 78 | } 79 | 80 | .card--playlist { 81 | margin-bottom: 5rem; 82 | width: 18rem; 83 | } 84 | .card-img { 85 | height: auto; 86 | object-fit: cover; 87 | width: 100%; 88 | } 89 | .card-img--hover { 90 | align-items: center; 91 | background: #fff; 92 | cursor: pointer; 93 | display: flex; 94 | height: 100%; 95 | justify-content: center; 96 | left: 0; 97 | opacity: 0; 98 | position: absolute; 99 | top: 0; 100 | transition: opacity 0.5s ease; 101 | width: 100%; 102 | z-index: 2; 103 | } 104 | .card-img--hover:hover { 105 | opacity: 0.7; 106 | } 107 | .b--open { 108 | font-size: 100px !important; 109 | } 110 | 111 | .playlist-choice { 112 | height: 30vh; 113 | overflow-x: hidden; 114 | overflow-y: scroll; 115 | } 116 | .playlist-choice__img { 117 | max-height: 1em; 118 | } 119 | 120 | .choice--highlighted { 121 | background: lightblue; 122 | } 123 | 124 | .bg--black { 125 | background: white; 126 | } 127 | 128 | .playlist-carousel { 129 | height: 70vh; 130 | } 131 | 132 | .songlist-table-wrapper { 133 | height: 100%; 134 | overflow-y: auto; 135 | position: absolute; 136 | width: 100%; 137 | } 138 | .songlist-rating-choice { 139 | background: #ccc; 140 | min-height: 60vh; 141 | overflow-x: hidden; 142 | overflow-y: scroll; 143 | } 144 | .noscroll { 145 | overflow-y: hidden; 146 | } 147 | .carousel-table { 148 | display: table; 149 | font-size: 0.75em; 150 | margin: 10% auto; 151 | margin-top: 0; 152 | max-width: 75%; 153 | } 154 | .carousel-control-next { 155 | right: 15px; 156 | } 157 | .clip-circle { 158 | clip-path: circle(20px at center); 159 | } 160 | 161 | .navbar-nav.navbar-center { 162 | position: absolute; 163 | left: 50%; 164 | transform: translatex(-50%); 165 | } -------------------------------------------------------------------------------- /app/generate-playlists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Home 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 25 | 26 |
27 | 28 |
29 |
30 |

Generate a Playlist!

31 |
32 |
33 | 34 |
35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 47 |
48 | 49 | 50 | 51 |
52 |
53 |
54 | Name 55 | Select Playlists 56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 | 65 |
66 |
67 |
68 | 69 |
70 | 71 |
72 |
73 |
74 |
75 |
76 |

Selected Playlists:

77 |
78 |
79 | 80 | 81 | 82 | 83 |
84 |
85 |
86 | 91 |
92 |
93 |
94 | 95 | 96 | 97 |
98 |
99 |
100 |
101 | 102 |
103 | 104 | 119 | 120 | 125 | 126 | 127 |
128 | 129 | 130 | 131 | 132 | 133 | 134 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 151 | 152 | -------------------------------------------------------------------------------- /app/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Home 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 33 | 34 |
35 | 36 |
37 |
38 |

Your Playlists refresh

39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 | 48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TC Spotify 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 33 |
34 |
35 |
36 |
37 |
38 |

Are you ready for a new listening experience?

39 |

Welcome to the Turing Club's ML Summer Research Project, our 40 | own version of Spotify's curated music prediction algorithm 41 |

42 |
43 |
44 | 45 |
46 | 67 | 68 | 85 |
86 |
87 |
88 | 89 | 90 | 91 | 92 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /app/js/generate-playlists.js: -------------------------------------------------------------------------------- 1 | // Variables 2 | var title; 3 | var numSongs; 4 | var selectedPlaylists; 5 | var ratingInformation = {}; 6 | 7 | const carouselDiv = document.getElementById('playlist-carousel'); 8 | const playlistDiv = document.getElementById('playlist-choice-list'); 9 | 10 | // NAVIGATION BUTTONS 11 | //////////////////////////////////////// 12 | 13 | document.getElementById('logout-button').addEventListener('click', (e) => { 14 | e.preventDefault(); 15 | localStorage.clear(); 16 | window.location.href = "index.html"; 17 | }); 18 | 19 | document.getElementById('my-playlists-button').addEventListener("click", function(){ 20 | window.location.href = "home.html"; 21 | }); 22 | 23 | document.getElementById('proceed-button').addEventListener("click", function(){ 24 | var num_songs = document.getElementById('num_songs').value 25 | if (!num_songs) { 26 | alert("Please enter a number of songs!"); 27 | window.location.href = "generate-playlists.html"; // reload page 28 | return; 29 | } // User must enter number of songs 30 | if (!selectedPlaylists) { 31 | alert("Please choose at least one playlist!"); 32 | document.getElementById('list-messages-list').click(); // redirect 33 | return; 34 | } // User must choose at least one playlist 35 | 36 | let playlist_array = arrayFilter(selectedPlaylists); 37 | 38 | let playlist_title = document.getElementById('name_playlist').value; 39 | if (playlist_title) title = playlist_title; 40 | else title = "Untitled Playlist"; 41 | 42 | console.log("Rate Songs for Playlist:", title, "!"); 43 | console.log("Filtered List: ", playlist_array); 44 | 45 | userID = localStorage.getItem('userID'); 46 | 47 | playlist_array = JSON.stringify({'songs': playlist_array}); 48 | 49 | $.ajax({ 50 | type: 'GET', 51 | url: "http://127.0.0.1:8000/api/choose-songs-to-rate", 52 | data: { 53 | user_id: userID, 54 | playlist_ids: playlist_array, 55 | number_songs: num_songs 56 | }, 57 | beforeSend: function() { 58 | document.getElementById('setup-playlist').style.display = "none"; 59 | document.getElementById('loading-spinner').style.display = "flex"; 60 | document.getElementById('rate-playlist').style.display = "none"; 61 | }, 62 | complete: function() { 63 | document.getElementById('setup-playlist').style.display = "none"; 64 | document.getElementById('loading-spinner').style.display = "none"; 65 | document.getElementById('rate-playlist').style.display = "block"; 66 | }, 67 | success: async function(result) { 68 | console.log(result); 69 | for ( let i = 0; i < result.playlists.length; i++ ) { 70 | loadCarouselItem(result.playlists[i], result.playlist_tracks[i], result.playlists.length); 71 | }; 72 | } 73 | }); 74 | }); 75 | 76 | // MISC 77 | //////////////////////////////////////// 78 | 79 | function arrayFilter(array) { 80 | var newArray = []; 81 | for (var i = 0; i < array.length; i++ ) { 82 | if (array[i] !== "") newArray.push(array[i]); 83 | } 84 | return newArray; 85 | } 86 | 87 | function rate(event) { 88 | 89 | // Star Display 90 | var id = event.srcElement.dataset.id; 91 | var index = event.srcElement.dataset.index; 92 | var starIndex = event.srcElement.dataset.sindex; 93 | var parent = event.srcElement.parentElement; 94 | console.log("Song number", index, "in album", id, "rated:", starIndex, "stars!"); 95 | 96 | while(parent.firstChild) { 97 | parent.removeChild(parent.firstChild); 98 | } 99 | var i = 0; 100 | while(i <= starIndex) { 101 | let star = createFullStar(id, i, index); 102 | parent.appendChild(star); 103 | i++; 104 | } 105 | while(i < 5) { 106 | let star = createEmptyStar(id, i, index); 107 | parent.appendChild(star); 108 | i++; 109 | } 110 | 111 | // Save rating data 112 | ratingInformation[id][index] = eval(parseInt(starIndex)+1); 113 | // console.log("Rating for album ", id, " updated: " ratingInformation[id]); 114 | 115 | return false; 116 | } 117 | 118 | function createEmptyStar(id, starIndex, index) { 119 | var star = document.createElement('span'); 120 | star.setAttribute('class', 'material-icons md-18 md-btn'); 121 | star.setAttribute('data-id', id); 122 | star.setAttribute('data-index', index); 123 | star.setAttribute('data-sindex', starIndex); 124 | star.appendChild(document.createTextNode('star_border')); 125 | star.addEventListener("click", rate); 126 | return star; 127 | } 128 | 129 | function createFullStar(id, starIndex, index) { 130 | var star = document.createElement('span'); 131 | star.setAttribute('class', 'material-icons md-18 md-btn'); 132 | star.setAttribute('data-id', id); 133 | star.setAttribute('data-index', index); 134 | star.setAttribute('data-sindex', starIndex); 135 | star.appendChild(document.createTextNode('star')); 136 | star.addEventListener("click", rate); 137 | return star; 138 | } 139 | 140 | // GENERATE 141 | //////////////////////////////////////// 142 | 143 | document.getElementById('list-messages-list').addEventListener("click", listPlaylist); 144 | 145 | // Empties the Playlist List such that the button does not continually append playlists 146 | function clearPlaylist() { 147 | while (playlistDiv.firstChild) { 148 | playlistDiv.removeChild(playlistDiv.firstChild); 149 | } 150 | } 151 | 152 | // List all playlists into playlist_choice_list 153 | function listPlaylist() { 154 | userID = localStorage.getItem('userID'); 155 | $.ajax({ 156 | type: 'GET', 157 | url: "http://127.0.0.1:8000/api/get-playlists", 158 | data: { 159 | user_id: userID, 160 | }, 161 | success: async function (result_playlists) { 162 | // console.log(result_playlist); 163 | if (selectedPlaylists) { 164 | if (selectedPlaylists.length !== result_playlists.playlists.length) 165 | selectedPlaylists = new Array(result_playlists.playlists.length).fill(""); 166 | } 167 | else selectedPlaylists = new Array(result_playlists.playlists.length).fill(""); 168 | clearPlaylist(); 169 | for( let i = 0; i < result_playlists.playlists.length; i++ ) { 170 | loadPlaylist(result_playlists.playlists[i], i); 171 | } 172 | } 173 | }); 174 | } 175 | // Handles what happens when you select or deselect a playlist on the Select Playlists screen 176 | function selectClick(event) { 177 | event.preventDefault(); 178 | // console.log(event.srcElement.parentElement.dataset.playlistid); 179 | var isElement = event.srcElement.parentElement.className.includes('playlist_element'); 180 | var isHighlighted = event.srcElement.parentElement.className.includes('choice--highlighted'); 181 | 182 | if(!isElement) return; 183 | var playlist_id = event.srcElement.parentElement.id.replace('playlist-',''); 184 | if(isHighlighted) { 185 | selectedPlaylists[event.srcElement.parentElement.dataset.playlistid] = ""; 186 | event.srcElement.parentElement.setAttribute('class', 'playlist_element mb-0'); 187 | } 188 | else { 189 | selectedPlaylists[event.srcElement.parentElement.dataset.playlistid] = playlist_id; 190 | event.srcElement.parentElement.setAttribute('class', 'playlist_element mb-0 choice--highlighted'); 191 | } 192 | // console.log(selectedPlaylists); 193 | } 194 | 195 | // Generates an Unordered List of the Playlists given the API data for "api/get-playlists" 196 | function loadPlaylist(data, index){ 197 | // Name of the Playlist in the list of playlists 198 | var playlist_title = data.name; 199 | 200 | // Creating the HTML Elements 201 | var list_element = playlistDiv.appendChild(document.createElement("tr")); 202 | var playlist_img = list_element.appendChild(document.createElement("td")); 203 | var playlist_img__img = playlist_img.appendChild(document.createElement("img")); 204 | var playlist_name = list_element.appendChild(document.createElement("td")); 205 | 206 | playlist_name.textContent = playlist_title; 207 | 208 | try { 209 | playlist_img__img.setAttribute('src', data.images[0].url); 210 | } 211 | catch (error) { 212 | console.log("Error loading thumbnail for song: ", data.name); 213 | playlist_img__img.setAttribute('src', '../assets/defaultsong.png'); 214 | } 215 | playlist_img__img.setAttribute('class', 'playlist-choice__img'); 216 | 217 | 218 | // Asserting Class and ID attributes to each element 219 | if( selectedPlaylists[index] ) list_element.setAttribute('class', 'playlist_element mb-0 choice--highlighted'); 220 | else list_element.setAttribute('class', 'playlist_element mb-0'); 221 | list_element.setAttribute('data-playlistid', index); 222 | list_element.setAttribute('id', 'playlist-' + data.id); 223 | list_element.addEventListener("click", selectClick); 224 | 225 | playlistDiv.appendChild(list_element); 226 | } 227 | 228 | function loadCarouselItem(playlist, songlist, totalPlaylist) { 229 | var indicator_index = carouselDiv.childElementCount; 230 | var playlistname = playlist.id; 231 | 232 | var carousel_item = document.createElement('div'); 233 | var carousel_body = carousel_item.appendChild(document.createElement('div')); 234 | var carousel_bodywrapper = carousel_body.appendChild(document.createElement('div')); 235 | var carousel_description = carousel_bodywrapper.appendChild(document.createElement('h5')); 236 | var carousel_body_t = carousel_bodywrapper.appendChild(document.createElement('table')); 237 | var carousel_body_table = carousel_body_t.appendChild(document.createElement('tbody')); 238 | 239 | if(indicator_index == 0) carousel_item.setAttribute('class', 'carousel-item active'); 240 | else carousel_item.setAttribute('class', 'carousel-item'); 241 | carousel_body.setAttribute('class', 'songlist-rating-choice noscroll'); 242 | carousel_bodywrapper.setAttribute('class', 'songlist-table-wrapper'); 243 | carousel_description.appendChild(document.createTextNode("Rating: Playlist " + eval(indicator_index+1) + " of " + totalPlaylist)) 244 | carousel_description.setAttribute('class', 't--center mt-5 mb-4'); 245 | carousel_body_t.setAttribute('class', 'table table-borderless table-hover carousel-table'); 246 | 247 | ratingInformation[playlistname] = new Array(songlist.length); 248 | 249 | for (let i = 0; i < songlist.length; i++) { 250 | var songitem = document.createElement('tr'); 251 | var song_row_num = songitem.appendChild(document.createElement('th')); 252 | var song_info = songitem.appendChild(document.createElement('td')); 253 | var song_info_title = song_info.appendChild(document.createElement('h6')); 254 | var song_info_more = song_info.appendChild(document.createElement('p')); 255 | var song_rating = songitem.appendChild(document.createElement('td')); 256 | 257 | song_row_num.setAttribute('class', 'songlist__table__num'); 258 | song_row_num.setAttribute('scope', 'row'); 259 | song_row_num.appendChild(document.createTextNode(i)); 260 | song_info_title.setAttribute('class', 'songlist__table__title mb-2 font-weight-bold'); 261 | song_info_title.appendChild(document.createTextNode(songlist[i].track.name)); 262 | song_info_more.setAttribute('class', 'songlist__table__artist mb-0'); 263 | song_info_more.appendChild(document.createTextNode(songlist[i].track.artists[0].name + " - " + songlist[i].track.album.name)); 264 | 265 | song_rating.setAttribute('class', 'songlist__table__rating'); 266 | 267 | for (let j = 0; j < 5; j++) { 268 | let star = createEmptyStar(playlist.id, j, i); 269 | song_rating.appendChild(star); 270 | } 271 | 272 | carousel_body_table.appendChild(songitem); 273 | 274 | ratingInformation[playlistname][i] = 0; // Initialize rating 275 | } 276 | 277 | carouselDiv.appendChild(carousel_item); 278 | 279 | // console.log(ratingInformation); 280 | 281 | /*
  • */ 282 | /* 283 |
    284 |
    285 | 286 | 287 | 288 | 289 |
    290 |
    291 |
    292 |
    First slide label
    293 |
    294 |
    295 | */ 296 | } 297 | -------------------------------------------------------------------------------- /app/js/home.js: -------------------------------------------------------------------------------- 1 | 2 | // NAVIGATION BUTTONS 3 | //////////////////////////////////////// 4 | 5 | const playlistDiv = document.getElementById('row-playlist'); 6 | const client_id = 'baa5f3746bf74710bf3f6b18926993db'; 7 | 8 | window.onSpotifyPlayerAPIReady = () => { 9 | userID = localStorage.getItem('userID'); 10 | token = localStorage.getItem('token'); 11 | console.log(token); 12 | const player = new Spotify.Player({ 13 | name: 'Turing', 14 | getOAuthToken: cb => { 15 | cb(token); 16 | } 17 | }); 18 | // Ready 19 | player.on('initialization_error', e => console.error(e)); 20 | player.on('authentication_error', e => console.error(e)); 21 | player.on('account_error', e => console.error(e)); 22 | player.on('playback_error', e => console.error(e)); 23 | player.on('ready', data => { 24 | console.log('Ready with Device ID', data.device_id); 25 | localStorage.setItem('device_id', data.device_id); 26 | }); 27 | 28 | // Connect to the player! 29 | player.connect(); 30 | }; 31 | 32 | document.getElementById('logout-button').addEventListener('click', (e) => { 33 | e.preventDefault(); 34 | localStorage.clear(); 35 | window.location.href = "index.html"; 36 | }); 37 | 38 | document.addEventListener('click', function (event) { 39 | if (event.target.matches('.redir-wrap')) { 40 | closePlaylist(); 41 | } 42 | }); 43 | 44 | document.getElementById('get-playlists-button').addEventListener('click', (e) => { 45 | e.preventDefault(); 46 | initialize(); 47 | return false; 48 | }); 49 | 50 | // Try-Catch: DB 51 | // Lets you navigate to generate-playlists.html, but while reusing this code on that page 52 | // it throws error since the "generate-playlist-button" element does not 53 | // exist in that file. 54 | try { 55 | document.getElementById('generate-playlists-button').addEventListener("click", function(){ 56 | window.location.href = "generate-playlists.html"; 57 | }); 58 | } 59 | catch {} 60 | 61 | // PLAYLIST/SONGLIST NAVIGATION 62 | //////////////////////////////////////// 63 | 64 | function setPlaylistButtons() { 65 | document.addEventListener('click', function (event) { 66 | if (event.target.matches('.playlist-open')) { 67 | openPlaylist(event.target.id.split('-')[2]); 68 | } 69 | }); 70 | } 71 | 72 | function openPlaylist(playlist_id){ 73 | // Hide and show appropriate 74 | document.getElementById('songlist-tab-' + playlist_id).style.display='block'; 75 | document.getElementById('playlist-tab').style.display='none'; 76 | } 77 | 78 | function closePlaylist(){ 79 | // Hide and show appropriate 80 | document.getElementById('playlist-tab').style.display='block'; 81 | var songlist = document.getElementsByClassName('songlist-tab'); 82 | for (var i = 0; i < songlist.length; i++) { 83 | songlist[i].style.display = 'none'; 84 | } 85 | } 86 | 87 | function clearPlaylist() { 88 | while (playlistDiv.firstChild) { 89 | playlistDiv.removeChild(playlistDiv.firstChild); 90 | } 91 | } 92 | 93 | function setProfile(data) { 94 | var profile_pic = document.getElementById('spotify-profile-pic'); 95 | var profile_pic_img = profile_pic.appendChild(document.createElement("img")); 96 | profile_pic_img.setAttribute('src', data[1]); 97 | profile_pic_img.setAttribute('width', '50'); 98 | profile_pic_img.setAttribute('class', 'clip-circle'); 99 | var display_name = document.getElementById('spotify-name'); 100 | display_name.appendChild(document.createTextNode(data[0])) 101 | } 102 | 103 | // PLAYLIST/SONGS LOAD AND PRINT 104 | //////////////////////////////////////// 105 | 106 | function loadPlaylist(data) { 107 | // Get data from JSON 108 | var title = data.name.toString(); 109 | try { 110 | var imageurl = data.images[0].url; 111 | } 112 | catch (error) { 113 | // console.error(error); 114 | console.log("Error loading thumbnail for playlist: ", title); 115 | var imageurl = '../assets/defaultplaylist.png'; 116 | } 117 | // console.log(data); 118 | var author = data.owner.display_name; 119 | 120 | // console.log(title, " ", author, " ", imageurl); 121 | var playlist_col = document.createElement('div'); 122 | playlist_col.setAttribute('class', 'col'); 123 | playlist_col.setAttribute('id', data.id); 124 | 125 | var playlist_card = document.createElement('div'); 126 | playlist_card.setAttribute('class', 'card card--playlist'); 127 | var playlist_card_hover = document.createElement('div'); 128 | playlist_card_hover.setAttribute('class', 'card-img--hover playlist-open'); 129 | playlist_card_hover.setAttribute('id', 'playlist-open-' + data.id.toString()); 130 | var playlist_card_hover_icon = document.createElement('i'); 131 | playlist_card_hover_icon.setAttribute('class', 'b--open material-icons'); 132 | playlist_card_hover_icon.appendChild(document.createTextNode("open_in_browser")); 133 | var playlist_card_img = document.createElement('img'); 134 | playlist_card_img.setAttribute('class', 'card-img card-img-top'); 135 | playlist_card_img.setAttribute('src', imageurl); 136 | 137 | var playlist_card_body = document.createElement('div'); 138 | playlist_card_body.setAttribute('class', 'card-body'); 139 | 140 | var playlist_card_body_title = document.createElement('h5'); 141 | playlist_card_body_title.setAttribute('class', 'card-title mb-1'); 142 | playlist_card_body_title.appendChild(document.createTextNode(title)); 143 | 144 | var playlist_card_body_text = document.createElement('p'); 145 | playlist_card_body_text.setAttribute('class', 'card-text'); 146 | playlist_card_body_text.appendChild(document.createTextNode(author)); 147 | 148 | playlist_card.appendChild(playlist_card_img); 149 | playlist_card_hover.appendChild(playlist_card_hover_icon); 150 | playlist_card.appendChild(playlist_card_hover); 151 | playlist_card_body.appendChild(playlist_card_body_title); 152 | playlist_card_body.appendChild(playlist_card_body_text); 153 | playlist_card.appendChild(playlist_card_body); 154 | 155 | var songlist_table_div = document.createElement('div'); 156 | songlist_table_div.setAttribute('class', 'songlist__table container mt-5'); 157 | songlist_table_div.setAttribute('id', 'songlist_table_div_' + data.id); 158 | var songlist_table = document.createElement('table'); 159 | songlist_table.setAttribute('class', 'table table-borderless table-hover'); 160 | songlist_table.setAttribute('id', 'songlist_table_' + data.id.toString()); 161 | // console.log('songlist_table_' + data.id); 162 | songlist_table_div.appendChild(songlist_table); 163 | 164 | var songlist_tab = document.createElement('div'); 165 | songlist_tab.setAttribute('id', 'songlist-tab-' + data.id.toString()); 166 | songlist_tab.setAttribute('class', 'container songlist-tab'); 167 | songlist_tab.setAttribute('style', 'display:none'); 168 | 169 | var redirect_wrapper = document.createElement('div'); 170 | redirect_wrapper.setAttribute('class', 'mt-5'); 171 | var redirect_wrapper_h2 = document.createElement('h2'); 172 | redirect_wrapper.appendChild(redirect_wrapper_h2); 173 | var redirect_wrapper_i = document.createElement('i'); 174 | redirect_wrapper_i.setAttribute('id', 'redirect-playlists' + data.id.toString()); 175 | redirect_wrapper_i.setAttribute('class', 'b--back material-icons redir-wrap'); 176 | redirect_wrapper_i.appendChild(document.createTextNode('keyboard_backspace')); 177 | redirect_wrapper_h2.appendChild(redirect_wrapper_i); 178 | redirect_wrapper_h2.appendChild(document.createTextNode(title)); 179 | redirect_wrapper.appendChild(redirect_wrapper_h2); 180 | songlist_tab.appendChild(redirect_wrapper); 181 | songlist_tab.appendChild(songlist_table_div); 182 | 183 | var body_tag = document.getElementById('body_tag'); 184 | body_tag.appendChild(songlist_tab); 185 | 186 | playlist_col.appendChild(playlist_card); 187 | playlistDiv.appendChild(playlist_col); 188 | } 189 | 190 | function loadTracks(data, playlist_id) { 191 | var song_table_wrapper = document.getElementById('songlist_table_' + playlist_id.toString()); 192 | while (song_table_wrapper.firstChild) { 193 | song_table_wrapper.removeChild(song_table_wrapper.firstChild); 194 | } 195 | var song_table = document.createElement('tbody'); 196 | song_table.setAttribute('id', 'table_songs_' + playlist_id.toString()); 197 | // console.log(data.playlist_tracks); 198 | 199 | for (i = 0; i < data.playlist_tracks.length; i++) { 200 | var track = data.playlist_tracks[i].track; 201 | // console.log(track); 202 | 203 | if (track.is_local) continue; // prevent local songs from being loaded 204 | 205 | var song_row = document.createElement('tr'); 206 | song_row.setAttribute('id', track.uri); 207 | var song_row_num = document.createElement('th'); 208 | song_row_num.setAttribute('class', 'songlist__table__num'); 209 | song_row_num.setAttribute('scope', 'row'); 210 | song_row_num.appendChild(document.createTextNode(i)); 211 | var song_img_wrapper = document.createElement('td'); 212 | song_img_wrapper.setAttribute('class', 'songlist__table__img'); 213 | var song_img = document.createElement('img'); 214 | song_img.setAttribute('class', 'songlist__table__img'); 215 | try { 216 | song_img.setAttribute('src', track.album.images[0].url); 217 | } 218 | catch (error) { 219 | // console.error(error); 220 | console.log("Error loading thumbnail for song: ", track.name); 221 | song_img.setAttribute('src', '../assets/defaultsong.png'); 222 | } 223 | var song_info = document.createElement('td'); 224 | var song_title = document.createElement('h4'); 225 | song_title.setAttribute('class', 'songlist__table__title mb-2 font-weight-bold'); 226 | song_title.appendChild(document.createTextNode(track.name)); 227 | var song_artist = document.createElement('p'); 228 | song_artist.setAttribute('class', 'songlist__table__artist mb-0'); 229 | song_artist.appendChild(document.createTextNode(track.artists[0].name)); 230 | var song_album = document.createElement('td'); 231 | song_album.setAttribute('class', 'songlist__table__album'); 232 | song_album.appendChild(document.createTextNode(track.album.name)); 233 | 234 | song_row.appendChild(song_row_num); 235 | song_img_wrapper.appendChild(song_img); 236 | song_row.appendChild(song_img_wrapper); 237 | song_info.appendChild(song_title); 238 | song_info.appendChild(song_artist); 239 | song_row.appendChild(song_info); 240 | song_row.appendChild(song_album); 241 | song_table.appendChild(song_row); 242 | } 243 | song_table_wrapper.appendChild(song_table); 244 | for (i = 0; i < data.playlist_tracks.length; i++) { 245 | var track = data.playlist_tracks[i].track; 246 | track_name = track.name.split('spotify:track:')[1]; 247 | device_id = localStorage.getItem('device_id'); 248 | document.getElementById(track.uri).addEventListener('click', (e) => { 249 | // play(device_id, track.uri); 250 | // getSong(device_id, track.uri, track.name, track.album.name, track.artists[0].name); 251 | }); 252 | } 253 | } 254 | 255 | function get_songs_by_playlist(playlist_id) { 256 | userID = localStorage.getItem('userID'); 257 | $.ajax({ 258 | type: 'GET', 259 | url: "http://127.0.0.1:8000/api/get-songs-by-playlist", 260 | data: { 261 | user_id: userID, 262 | playlist_id: playlist_id, 263 | }, 264 | success: async function (result) { 265 | // console.log("Retreived songs: ", result); 266 | loadTracks(result, playlist_id); 267 | } 268 | }); 269 | return false; 270 | } 271 | 272 | 273 | // PAGE INITIALIZATION 274 | //////////////////////////////////////// 275 | 276 | function initialize() { 277 | userID = localStorage.getItem('userID'); 278 | $.ajax({ 279 | type: 'GET', 280 | url: "http://127.0.0.1:8000/api/get-playlists", 281 | data: { 282 | user_id: userID, 283 | }, 284 | success: async function (result_playlists) { 285 | // console.log("Retreived playlists: ", result_playlist); 286 | clearPlaylist(); 287 | for( let i = 0; i < result_playlists.playlists.length; i++ ) { 288 | loadPlaylist(result_playlists.playlists[i]); 289 | get_songs_by_playlist(result_playlists.playlists[i].id); 290 | } 291 | getToken(); 292 | setPlaylistButtons(); 293 | getProfile(); 294 | } 295 | }); 296 | return false; 297 | } 298 | 299 | function getProfile() { 300 | userID = localStorage.getItem('userID'); 301 | $.ajax({ 302 | type: 'GET', 303 | url: "http://127.0.0.1:8000/api/get-profile", 304 | data: { 305 | user_id: userID, 306 | }, 307 | success: async function (result_profile) { 308 | let data = ['Cool person', '../assets/defaultuser.png']; 309 | try { 310 | let data = [result_profile.name, result_profile.pic]; 311 | setProfile(data); 312 | } 313 | catch(error) { 314 | console.log("Cannot get profile pic!"); 315 | setProfile(data); 316 | } 317 | } 318 | }); 319 | return false; 320 | } 321 | 322 | function play_pause(song, choice) { 323 | userID = localStorage.getItem('userID'); 324 | $.ajax({ 325 | type: 'GET', 326 | url: ("http://127.0.0.1:8000/api/").concat(choice), 327 | data: { 328 | user_id: userID, 329 | track_uri: song, 330 | }, 331 | success: async function (data) { 332 | let play_button = document.getElementById("play-pause-button"); 333 | play_button.appendChild(document.createTextNode('play_circle_filled')); 334 | } 335 | }); 336 | return false; 337 | } 338 | 339 | // NOTE: Playback functionality not working yet because the build of Spotipy we're using 340 | // doesn't have that feature - we could switch to another Spotipy build such as 341 | 342 | function getToken() { 343 | userID = localStorage.getItem('userID'); 344 | $.ajax({ 345 | type: 'GET', 346 | url: "http://127.0.0.1:8000/api/get-token", 347 | data: { 348 | user_id: userID, 349 | }, 350 | success: async function (data) { 351 | console.log(data); 352 | localStorage.setItem('token', data.token); 353 | } 354 | }); 355 | return false; 356 | } 357 | 358 | // Testing alternative music player function 359 | function play(device_id, track_id) { 360 | $.ajax({ 361 | url: "https://api.spotify.com/v1/me/player/play?device_id=" + device_id, 362 | type: "PUT", 363 | data: '{"uris": ["' + track_id + '"]}', 364 | beforeSend: function(xhr){ 365 | var token = localStorage.getItem('token'); 366 | xhr.setRequestHeader('Authorization', 'Bearer ' + token );}, 367 | success: function(data) { 368 | console.log(data); 369 | } 370 | }); 371 | } 372 | 373 | function getSong(device_id, song, song_name, album, artist) { 374 | userID = localStorage.getItem('userID'); 375 | $.ajax({ 376 | type: 'GET', 377 | url: "http://127.0.0.1:8000/api/get-song", 378 | data: { 379 | user_id: userID, 380 | track_uri: song, 381 | device_id: device_id, 382 | }, 383 | success: async function (track) { 384 | let song_info = document.getElementById('song-info'); 385 | let song_name_div = document.createElement('song-name'); 386 | let album_div = document.createElement('album'); 387 | let artist_div = document.createElement('artist'); 388 | song_name_div.appendChild(document.createTextNode(song_name)); 389 | album_div.appendChild(document.createTextNode(album)); 390 | artist_div.appendChild(document.createTextNode(artist)); 391 | song_info.appendChild(song_name_div); 392 | song_info.appendChild(album_div); 393 | song_info.appendChild(artist_div); 394 | // play_pause(song, "play"); 395 | } 396 | }); 397 | return false; 398 | } 399 | 400 | window.onload = initialize; 401 | -------------------------------------------------------------------------------- /app/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const { BrowserWindow } = require('electron').remote; 4 | var scopes = 'user-read-private user-read-email streaming user-modify-playback-state'; 5 | let csrftoken = Cookies.get('csrftoken'); 6 | $.ajaxSetup({ 7 | beforeSend: function(xhr, settings) { 8 | xhr.setRequestHeader("X-CSRFToken", csrftoken); 9 | } 10 | }); 11 | 12 | 13 | $(document).on("click", ".register", function(event){ 14 | let status = document.getElementById('login-reg-button'); 15 | status.innerHTML='Login'; 16 | showForm('login'); 17 | }); 18 | 19 | $(document).on("click", ".login", function(event){ 20 | let status = document.getElementById('login-reg-button'); 21 | status.innerHTML='Sign Up'; 22 | showForm('register'); 23 | }); 24 | 25 | // Function to Show or Hide the login/register forms on the landing page 26 | function showForm(status){ 27 | if (status === 'login'){ 28 | document.getElementById('register-form').style="display:block"; 29 | document.getElementById('login-form').style="display:none"; 30 | } 31 | else { 32 | document.getElementById('login-form').style="display:block"; 33 | document.getElementById('register-form').style="display:none"; 34 | } 35 | } 36 | 37 | function sendError() { 38 | document.getElementById('error').innerHTML = ' '; 44 | } 45 | async function openSpotifyWindow(userID) { 46 | console.log('clicked'); 47 | let authWindow = new BrowserWindow({ 48 | width: 800, 49 | height: 600, 50 | show: false, 51 | 'node-integration': false, 52 | 'web-security': false 53 | }); 54 | let authUrl = 'https://accounts.spotify.com/authorize?response_type=code&client_id=baa5f3746bf74710bf3f6b18926993db' + (scopes ? '&scope=' + encodeURIComponent(scopes) : '') + 55 | '&redirect_uri=http://127.0.0.1:8000/setup-success'; 56 | 57 | await authWindow.loadURL(authUrl); 58 | authWindow.show(); 59 | authWindow.webContents.openDevTools(); 60 | authWindow.webContents.on('did-redirect-navigation', function (event, newUrl) { 61 | event.preventDefault(); 62 | console.log(newUrl); 63 | if (newUrl.includes('http://127.0.0.1:8000/setup-success')) { 64 | if (newUrl.includes('code=')) { 65 | let code = newUrl.split('code=')[1]; 66 | code = code.split('#')[0]; 67 | authWindow.close(); 68 | addCodeToUser(code, userID); 69 | window.location.href = "home.html"; 70 | } else { 71 | authWindow.close(); 72 | sendError(); 73 | } 74 | } 75 | }); 76 | 77 | authWindow.on('closed', function() { 78 | authWindow = null; 79 | }); 80 | } 81 | 82 | function addCodeToUser(code, userID) { 83 | $.ajax({ 84 | type: 'POST', 85 | url: "http://127.0.0.1:8000/api/add-code", 86 | data: { 87 | code : code, 88 | user_id: userID, 89 | }, 90 | success: function(result) { 91 | console.log(result); 92 | } 93 | }); 94 | } 95 | 96 | document.getElementById('register-form-button').addEventListener('click', (e) => { 97 | e.preventDefault(); 98 | let username = document.getElementById('register-username').value; 99 | let password = document.getElementById('register-password').value; 100 | let email = document.getElementById('register-email').value; 101 | $.ajax({ 102 | type: 'POST', 103 | url: "http://127.0.0.1:8000/api/register", 104 | data: { 105 | username : username, 106 | password: password, 107 | email: email, 108 | }, 109 | success: async function(result) { 110 | console.log(result); 111 | if (result.status === 200) { 112 | localStorage.setItem('userID', result.user_id); 113 | await openSpotifyWindow(result.user_id); 114 | } else { 115 | sendError(); 116 | } 117 | } 118 | }); 119 | return false; 120 | }); 121 | 122 | document.getElementById('login-form-button').addEventListener('click', (e) => { 123 | e.preventDefault(); 124 | let username = document.getElementById('log-in-username').value; 125 | let password = document.getElementById('log-in-password').value; 126 | $.ajax({ 127 | type: 'POST', 128 | url: "http://127.0.0.1:8000/api/login", 129 | data: { 130 | username : username, 131 | password: password, 132 | }, 133 | success: async function(result) { 134 | console.log(result); 135 | if (result.status === 200) { 136 | localStorage.setItem('userID', result.user_id); 137 | window.location.href = "home.html"; 138 | } else { 139 | sendError(); 140 | return false; 141 | } 142 | } 143 | }); 144 | return false; 145 | }); 146 | -------------------------------------------------------------------------------- /assets/defaultplaylist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/turing-club/electron-spotify/5ac666aa0f94eb31a656ad9485e687acc921a791/assets/defaultplaylist.png -------------------------------------------------------------------------------- /assets/defaultsong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/turing-club/electron-spotify/5ac666aa0f94eb31a656ad9485e687acc921a791/assets/defaultsong.png -------------------------------------------------------------------------------- /assets/defaultuser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/turing-club/electron-spotify/5ac666aa0f94eb31a656ad9485e687acc921a791/assets/defaultuser.png -------------------------------------------------------------------------------- /assets/turing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/turing-club/electron-spotify/5ac666aa0f94eb31a656ad9485e687acc921a791/assets/turing.png -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const {app, BrowserWindow} = require('electron'); 2 | const path = require('path'); 3 | 4 | app.commandLine.appendSwitch('no-verify-widevine-cdm'); 5 | 6 | // Keep a global reference of the window object, if you don't, the window will 7 | // be closed automatically when the JavaScript object is garbage collected. 8 | let mainWindow; 9 | 10 | function createWindow () { 11 | // Create the browser window. 12 | mainWindow = new BrowserWindow({ 13 | width: 1200, 14 | height: 800, 15 | webPreferences: { 16 | preload: path.join(__dirname, 'preload.js'), 17 | nodeIntegration: true, 18 | plugins: true 19 | } 20 | }); 21 | 22 | mainWindow.setResizable(true); 23 | 24 | // and load the index.html of the app. 25 | mainWindow.loadFile('app/index.html'); 26 | // Open the DevTools. 27 | mainWindow.webContents.openDevTools(); 28 | 29 | // Emitted when the window is closed. 30 | mainWindow.on('closed', function () { 31 | // Dereference the window object, usually you would store windows 32 | // in an array if your app supports multi windows, this is the time 33 | // when you should delete the corresponding element. 34 | mainWindow = null 35 | }) 36 | } 37 | 38 | // Set up Widevine (DRM engine required to play Spotify songs in Electron - Chrome has it by default but Electron does 39 | // not, so we have to load it manually). 40 | app.on('ready', () => { 41 | // Demonstrating with default session, but a custom session object can be used 42 | app.verifyWidevineCdm({ 43 | session: BrowserWindow.defaultSession, 44 | }); 45 | 46 | // Do other early initialization... 47 | }); 48 | 49 | app.on('widevine-ready', (version, lastVersion) => { 50 | if (null !== lastVersion) { 51 | console.log('Widevine ' + version + ', upgraded from ' + lastVersion + ', is ready to be used!'); 52 | } else { 53 | console.log('Widevine ' + version + ' is ready to be used!'); 54 | } 55 | }); 56 | 57 | // This method will be called when Electron has finished 58 | // initialization and is ready to create browser windows. 59 | // Some APIs can only be used after this event occurs. 60 | app.on('ready', createWindow); 61 | 62 | // Quit when all windows are closed. 63 | app.on('window-all-closed', function () { 64 | // On macOS it is common for applications and their menu bar 65 | // to stay active until the user quits explicitly with Cmd + Q 66 | if (process.platform !== 'darwin') app.quit() 67 | }); 68 | 69 | app.on('activate', function () { 70 | // On macOS it's common to re-create a window in the app when the 71 | // dock icon is clicked and there are no other windows open. 72 | if (mainWindow === null) createWindow() 73 | }); 74 | 75 | // In this file you can include the rest of your app's specific main process 76 | // code. You can also put them in separate files and require them here. 77 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-spotify", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@electron/get": { 8 | "version": "1.12.2", 9 | "resolved": "https://registry.npmjs.org/@electron/get/-/get-1.12.2.tgz", 10 | "integrity": "sha512-vAuHUbfvBQpYTJ5wB7uVIDq5c/Ry0fiTBMs7lnEYAo/qXXppIVcWdfBr57u6eRnKdVso7KSiH6p/LbQAG6Izrg==", 11 | "requires": { 12 | "debug": "^4.1.1", 13 | "env-paths": "^2.2.0", 14 | "fs-extra": "^8.1.0", 15 | "global-agent": "^2.0.2", 16 | "global-tunnel-ng": "^2.7.1", 17 | "got": "^9.6.0", 18 | "progress": "^2.0.3", 19 | "sanitize-filename": "^1.6.2", 20 | "sumchecker": "^3.0.1" 21 | } 22 | }, 23 | "@sindresorhus/is": { 24 | "version": "0.14.0", 25 | "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", 26 | "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==" 27 | }, 28 | "@szmarczak/http-timer": { 29 | "version": "1.1.2", 30 | "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", 31 | "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==", 32 | "requires": { 33 | "defer-to-connect": "^1.0.1" 34 | } 35 | }, 36 | "@types/node": { 37 | "version": "12.12.50", 38 | "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.50.tgz", 39 | "integrity": "sha512-5ImO01Fb8YsEOYpV+aeyGYztcYcjGsBvN4D7G5r1ef2cuQOpymjWNQi5V0rKHE6PC2ru3HkoUr/Br2/8GUA84w==" 40 | }, 41 | "all": { 42 | "version": "0.0.0", 43 | "resolved": "https://registry.npmjs.org/all/-/all-0.0.0.tgz", 44 | "integrity": "sha1-+yqnXUdZ1A457LsRj6vwzBH/VU8=" 45 | }, 46 | "boolean": { 47 | "version": "3.0.1", 48 | "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.1.tgz", 49 | "integrity": "sha512-HRZPIjPcbwAVQvOTxR4YE3o8Xs98NqbbL1iEZDCz7CL8ql0Lt5iOyJFxfnAB0oFs8Oh02F/lLlg30Mexv46LjA==", 50 | "optional": true 51 | }, 52 | "buffer-crc32": { 53 | "version": "0.2.13", 54 | "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", 55 | "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=" 56 | }, 57 | "buffer-from": { 58 | "version": "1.1.1", 59 | "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", 60 | "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==" 61 | }, 62 | "cacheable-request": { 63 | "version": "6.1.0", 64 | "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz", 65 | "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==", 66 | "requires": { 67 | "clone-response": "^1.0.2", 68 | "get-stream": "^5.1.0", 69 | "http-cache-semantics": "^4.0.0", 70 | "keyv": "^3.0.0", 71 | "lowercase-keys": "^2.0.0", 72 | "normalize-url": "^4.1.0", 73 | "responselike": "^1.0.2" 74 | }, 75 | "dependencies": { 76 | "get-stream": { 77 | "version": "5.1.0", 78 | "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz", 79 | "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==", 80 | "requires": { 81 | "pump": "^3.0.0" 82 | } 83 | }, 84 | "lowercase-keys": { 85 | "version": "2.0.0", 86 | "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz", 87 | "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==" 88 | } 89 | } 90 | }, 91 | "clone-response": { 92 | "version": "1.0.2", 93 | "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz", 94 | "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=", 95 | "requires": { 96 | "mimic-response": "^1.0.0" 97 | } 98 | }, 99 | "concat-stream": { 100 | "version": "1.6.2", 101 | "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", 102 | "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", 103 | "requires": { 104 | "buffer-from": "^1.0.0", 105 | "inherits": "^2.0.3", 106 | "readable-stream": "^2.2.2", 107 | "typedarray": "^0.0.6" 108 | } 109 | }, 110 | "config-chain": { 111 | "version": "1.1.12", 112 | "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz", 113 | "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==", 114 | "optional": true, 115 | "requires": { 116 | "ini": "^1.3.4", 117 | "proto-list": "~1.2.1" 118 | } 119 | }, 120 | "core-js": { 121 | "version": "3.6.5", 122 | "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz", 123 | "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==", 124 | "optional": true 125 | }, 126 | "core-util-is": { 127 | "version": "1.0.2", 128 | "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", 129 | "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" 130 | }, 131 | "debug": { 132 | "version": "4.1.1", 133 | "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", 134 | "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", 135 | "requires": { 136 | "ms": "^2.1.1" 137 | } 138 | }, 139 | "decompress-response": { 140 | "version": "3.3.0", 141 | "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz", 142 | "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=", 143 | "requires": { 144 | "mimic-response": "^1.0.0" 145 | } 146 | }, 147 | "defer-to-connect": { 148 | "version": "1.1.3", 149 | "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz", 150 | "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==" 151 | }, 152 | "define-properties": { 153 | "version": "1.1.3", 154 | "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", 155 | "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", 156 | "optional": true, 157 | "requires": { 158 | "object-keys": "^1.0.12" 159 | } 160 | }, 161 | "detect-node": { 162 | "version": "2.0.4", 163 | "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz", 164 | "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==", 165 | "optional": true 166 | }, 167 | "duplexer3": { 168 | "version": "0.1.4", 169 | "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", 170 | "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=" 171 | }, 172 | "electron": { 173 | "version": "git+https://github.com/castlabs/electron-releases.git#0547ccf575fea3e1a8b644ef173856fe0a497a1a", 174 | "from": "git+https://github.com/castlabs/electron-releases.git#v7.0.0-wvvmp", 175 | "requires": { 176 | "@electron/get": "^1.0.1", 177 | "@types/node": "^12.0.12", 178 | "extract-zip": "^1.0.3" 179 | } 180 | }, 181 | "encodeurl": { 182 | "version": "1.0.2", 183 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 184 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", 185 | "optional": true 186 | }, 187 | "end-of-stream": { 188 | "version": "1.4.4", 189 | "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", 190 | "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", 191 | "requires": { 192 | "once": "^1.4.0" 193 | } 194 | }, 195 | "env-paths": { 196 | "version": "2.2.0", 197 | "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.0.tgz", 198 | "integrity": "sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==" 199 | }, 200 | "es6-error": { 201 | "version": "4.1.1", 202 | "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz", 203 | "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==", 204 | "optional": true 205 | }, 206 | "escape-string-regexp": { 207 | "version": "4.0.0", 208 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", 209 | "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", 210 | "optional": true 211 | }, 212 | "extract-zip": { 213 | "version": "1.7.0", 214 | "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz", 215 | "integrity": "sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==", 216 | "requires": { 217 | "concat-stream": "^1.6.2", 218 | "debug": "^2.6.9", 219 | "mkdirp": "^0.5.4", 220 | "yauzl": "^2.10.0" 221 | }, 222 | "dependencies": { 223 | "debug": { 224 | "version": "2.6.9", 225 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 226 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 227 | "requires": { 228 | "ms": "2.0.0" 229 | } 230 | }, 231 | "ms": { 232 | "version": "2.0.0", 233 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 234 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 235 | } 236 | } 237 | }, 238 | "fd-slicer": { 239 | "version": "1.1.0", 240 | "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", 241 | "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=", 242 | "requires": { 243 | "pend": "~1.2.0" 244 | } 245 | }, 246 | "fs-extra": { 247 | "version": "8.1.0", 248 | "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", 249 | "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", 250 | "requires": { 251 | "graceful-fs": "^4.2.0", 252 | "jsonfile": "^4.0.0", 253 | "universalify": "^0.1.0" 254 | } 255 | }, 256 | "get-stream": { 257 | "version": "4.1.0", 258 | "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", 259 | "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", 260 | "requires": { 261 | "pump": "^3.0.0" 262 | } 263 | }, 264 | "global-agent": { 265 | "version": "2.1.12", 266 | "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-2.1.12.tgz", 267 | "integrity": "sha512-caAljRMS/qcDo69X9BfkgrihGUgGx44Fb4QQToNQjsiWh+YlQ66uqYVAdA8Olqit+5Ng0nkz09je3ZzANMZcjg==", 268 | "optional": true, 269 | "requires": { 270 | "boolean": "^3.0.1", 271 | "core-js": "^3.6.5", 272 | "es6-error": "^4.1.1", 273 | "matcher": "^3.0.0", 274 | "roarr": "^2.15.3", 275 | "semver": "^7.3.2", 276 | "serialize-error": "^7.0.1" 277 | } 278 | }, 279 | "global-tunnel-ng": { 280 | "version": "2.7.1", 281 | "resolved": "https://registry.npmjs.org/global-tunnel-ng/-/global-tunnel-ng-2.7.1.tgz", 282 | "integrity": "sha512-4s+DyciWBV0eK148wqXxcmVAbFVPqtc3sEtUE/GTQfuU80rySLcMhUmHKSHI7/LDj8q0gDYI1lIhRRB7ieRAqg==", 283 | "optional": true, 284 | "requires": { 285 | "encodeurl": "^1.0.2", 286 | "lodash": "^4.17.10", 287 | "npm-conf": "^1.1.3", 288 | "tunnel": "^0.0.6" 289 | } 290 | }, 291 | "globalthis": { 292 | "version": "1.0.1", 293 | "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.1.tgz", 294 | "integrity": "sha512-mJPRTc/P39NH/iNG4mXa9aIhNymaQikTrnspeCa2ZuJ+mH2QN/rXwtX3XwKrHqWgUQFbNZKtHM105aHzJalElw==", 295 | "optional": true, 296 | "requires": { 297 | "define-properties": "^1.1.3" 298 | } 299 | }, 300 | "got": { 301 | "version": "9.6.0", 302 | "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", 303 | "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==", 304 | "requires": { 305 | "@sindresorhus/is": "^0.14.0", 306 | "@szmarczak/http-timer": "^1.1.2", 307 | "cacheable-request": "^6.0.0", 308 | "decompress-response": "^3.3.0", 309 | "duplexer3": "^0.1.4", 310 | "get-stream": "^4.1.0", 311 | "lowercase-keys": "^1.0.1", 312 | "mimic-response": "^1.0.1", 313 | "p-cancelable": "^1.0.0", 314 | "to-readable-stream": "^1.0.0", 315 | "url-parse-lax": "^3.0.0" 316 | } 317 | }, 318 | "graceful-fs": { 319 | "version": "4.2.4", 320 | "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", 321 | "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==" 322 | }, 323 | "http-cache-semantics": { 324 | "version": "4.1.0", 325 | "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", 326 | "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==" 327 | }, 328 | "inherits": { 329 | "version": "2.0.4", 330 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 331 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" 332 | }, 333 | "ini": { 334 | "version": "1.3.5", 335 | "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", 336 | "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", 337 | "optional": true 338 | }, 339 | "isarray": { 340 | "version": "1.0.0", 341 | "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", 342 | "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" 343 | }, 344 | "json-buffer": { 345 | "version": "3.0.0", 346 | "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", 347 | "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=" 348 | }, 349 | "json-stringify-safe": { 350 | "version": "5.0.1", 351 | "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", 352 | "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", 353 | "optional": true 354 | }, 355 | "jsonfile": { 356 | "version": "4.0.0", 357 | "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", 358 | "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", 359 | "requires": { 360 | "graceful-fs": "^4.1.6" 361 | } 362 | }, 363 | "keyv": { 364 | "version": "3.1.0", 365 | "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz", 366 | "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==", 367 | "requires": { 368 | "json-buffer": "3.0.0" 369 | } 370 | }, 371 | "lodash": { 372 | "version": "4.17.19", 373 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", 374 | "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==", 375 | "optional": true 376 | }, 377 | "lowercase-keys": { 378 | "version": "1.0.1", 379 | "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", 380 | "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==" 381 | }, 382 | "matcher": { 383 | "version": "3.0.0", 384 | "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz", 385 | "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==", 386 | "optional": true, 387 | "requires": { 388 | "escape-string-regexp": "^4.0.0" 389 | } 390 | }, 391 | "mimic-response": { 392 | "version": "1.0.1", 393 | "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", 394 | "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==" 395 | }, 396 | "minimist": { 397 | "version": "1.2.5", 398 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", 399 | "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" 400 | }, 401 | "mkdirp": { 402 | "version": "0.5.5", 403 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", 404 | "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", 405 | "requires": { 406 | "minimist": "^1.2.5" 407 | } 408 | }, 409 | "ms": { 410 | "version": "2.1.2", 411 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", 412 | "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" 413 | }, 414 | "normalize-url": { 415 | "version": "4.5.0", 416 | "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz", 417 | "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==" 418 | }, 419 | "npm-conf": { 420 | "version": "1.1.3", 421 | "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz", 422 | "integrity": "sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==", 423 | "optional": true, 424 | "requires": { 425 | "config-chain": "^1.1.11", 426 | "pify": "^3.0.0" 427 | } 428 | }, 429 | "object-keys": { 430 | "version": "1.1.1", 431 | "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", 432 | "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", 433 | "optional": true 434 | }, 435 | "once": { 436 | "version": "1.4.0", 437 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 438 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 439 | "requires": { 440 | "wrappy": "1" 441 | } 442 | }, 443 | "p-cancelable": { 444 | "version": "1.1.0", 445 | "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz", 446 | "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==" 447 | }, 448 | "pend": { 449 | "version": "1.2.0", 450 | "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", 451 | "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=" 452 | }, 453 | "pify": { 454 | "version": "3.0.0", 455 | "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", 456 | "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", 457 | "optional": true 458 | }, 459 | "prepend-http": { 460 | "version": "2.0.0", 461 | "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", 462 | "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=" 463 | }, 464 | "process-nextick-args": { 465 | "version": "2.0.1", 466 | "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", 467 | "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" 468 | }, 469 | "progress": { 470 | "version": "2.0.3", 471 | "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", 472 | "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==" 473 | }, 474 | "proto-list": { 475 | "version": "1.2.4", 476 | "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", 477 | "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=", 478 | "optional": true 479 | }, 480 | "pump": { 481 | "version": "3.0.0", 482 | "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", 483 | "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", 484 | "requires": { 485 | "end-of-stream": "^1.1.0", 486 | "once": "^1.3.1" 487 | } 488 | }, 489 | "readable-stream": { 490 | "version": "2.3.7", 491 | "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", 492 | "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", 493 | "requires": { 494 | "core-util-is": "~1.0.0", 495 | "inherits": "~2.0.3", 496 | "isarray": "~1.0.0", 497 | "process-nextick-args": "~2.0.0", 498 | "safe-buffer": "~5.1.1", 499 | "string_decoder": "~1.1.1", 500 | "util-deprecate": "~1.0.1" 501 | } 502 | }, 503 | "responselike": { 504 | "version": "1.0.2", 505 | "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz", 506 | "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=", 507 | "requires": { 508 | "lowercase-keys": "^1.0.0" 509 | } 510 | }, 511 | "roarr": { 512 | "version": "2.15.3", 513 | "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.3.tgz", 514 | "integrity": "sha512-AEjYvmAhlyxOeB9OqPUzQCo3kuAkNfuDk/HqWbZdFsqDFpapkTjiw+p4svNEoRLvuqNTxqfL+s+gtD4eDgZ+CA==", 515 | "optional": true, 516 | "requires": { 517 | "boolean": "^3.0.0", 518 | "detect-node": "^2.0.4", 519 | "globalthis": "^1.0.1", 520 | "json-stringify-safe": "^5.0.1", 521 | "semver-compare": "^1.0.0", 522 | "sprintf-js": "^1.1.2" 523 | } 524 | }, 525 | "safe-buffer": { 526 | "version": "5.1.2", 527 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", 528 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" 529 | }, 530 | "sanitize-filename": { 531 | "version": "1.6.3", 532 | "resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.3.tgz", 533 | "integrity": "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==", 534 | "requires": { 535 | "truncate-utf8-bytes": "^1.0.0" 536 | } 537 | }, 538 | "semver": { 539 | "version": "7.3.2", 540 | "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", 541 | "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", 542 | "optional": true 543 | }, 544 | "semver-compare": { 545 | "version": "1.0.0", 546 | "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz", 547 | "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=", 548 | "optional": true 549 | }, 550 | "serialize-error": { 551 | "version": "7.0.1", 552 | "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz", 553 | "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==", 554 | "optional": true, 555 | "requires": { 556 | "type-fest": "^0.13.1" 557 | } 558 | }, 559 | "sprintf-js": { 560 | "version": "1.1.2", 561 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz", 562 | "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==", 563 | "optional": true 564 | }, 565 | "string_decoder": { 566 | "version": "1.1.1", 567 | "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", 568 | "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", 569 | "requires": { 570 | "safe-buffer": "~5.1.0" 571 | } 572 | }, 573 | "sumchecker": { 574 | "version": "3.0.1", 575 | "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz", 576 | "integrity": "sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==", 577 | "requires": { 578 | "debug": "^4.1.0" 579 | } 580 | }, 581 | "to-readable-stream": { 582 | "version": "1.0.0", 583 | "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz", 584 | "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==" 585 | }, 586 | "truncate-utf8-bytes": { 587 | "version": "1.0.2", 588 | "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz", 589 | "integrity": "sha1-QFkjkJWS1W94pYGENLC3hInKXys=", 590 | "requires": { 591 | "utf8-byte-length": "^1.0.1" 592 | } 593 | }, 594 | "tunnel": { 595 | "version": "0.0.6", 596 | "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz", 597 | "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==", 598 | "optional": true 599 | }, 600 | "type-fest": { 601 | "version": "0.13.1", 602 | "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", 603 | "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", 604 | "optional": true 605 | }, 606 | "typedarray": { 607 | "version": "0.0.6", 608 | "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", 609 | "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" 610 | }, 611 | "universalify": { 612 | "version": "0.1.2", 613 | "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", 614 | "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" 615 | }, 616 | "url-parse-lax": { 617 | "version": "3.0.0", 618 | "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", 619 | "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=", 620 | "requires": { 621 | "prepend-http": "^2.0.0" 622 | } 623 | }, 624 | "utf8-byte-length": { 625 | "version": "1.0.4", 626 | "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz", 627 | "integrity": "sha1-9F8VDExm7uloGGUFq5P8u4rWv2E=" 628 | }, 629 | "util-deprecate": { 630 | "version": "1.0.2", 631 | "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", 632 | "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" 633 | }, 634 | "wrappy": { 635 | "version": "1.0.2", 636 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 637 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" 638 | }, 639 | "yauzl": { 640 | "version": "2.10.0", 641 | "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", 642 | "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=", 643 | "requires": { 644 | "buffer-crc32": "~0.2.3", 645 | "fd-slicer": "~1.1.0" 646 | } 647 | } 648 | } 649 | } 650 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-spotify", 3 | "version": "1.0.0", 4 | "description": "A Spotify client that understands you through AI", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "electron .", 8 | "startd": "electron --no-sandbox ." 9 | }, 10 | "repository": "https://github.com/turing-club/electron-spotify", 11 | "keywords": [ 12 | "Electron", 13 | "quick", 14 | "start", 15 | "tutorial", 16 | "demo" 17 | ], 18 | "author": "Turing Club", 19 | "license": "CC0-1.0", 20 | "devDependencies": { 21 | "electron": "https://github.com/castlabs/electron-releases#v7.0.0-wvvmp" 22 | }, 23 | "dependencies": { 24 | "all": "0.0.0", 25 | "electron": "https://github.com/castlabs/electron-releases#v7.0.0-wvvmp" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /preload.js: -------------------------------------------------------------------------------- 1 | // All of the Node.js APIs are available in the preload process. 2 | // It has the same sandbox as a Chrome extension. 3 | window.addEventListener('DOMContentLoaded', () => { 4 | const replaceText = (selector, text) => { 5 | const element = document.getElementById(selector) 6 | if (element) element.innerText = text 7 | } 8 | 9 | for (const type of ['chrome', 'node', 'electron']) { 10 | replaceText(`${type}-version`, process.versions[type]) 11 | } 12 | 13 | }) 14 | 15 | const { 16 | ipcRenderer, 17 | } = require('electron'); 18 | 19 | // make global (disable node integration) 20 | window.ipcRenderer = ipcRenderer; 21 | -------------------------------------------------------------------------------- /renderer.js: -------------------------------------------------------------------------------- 1 | // This file is required by the index.html file and will 2 | // be executed in the renderer process for that window. 3 | // All of the Node.js APIs are available in this process. 4 | --------------------------------------------------------------------------------