From 30c956c30170c9f96775f94e591a99165556bfbd Mon Sep 17 00:00:00 2001 From: Stein Magnus Jodal Date: Thu, 22 Jun 2023 00:50:29 +0200 Subject: [PATCH 1/3] Replace Parcel v1 with Rollup --- .prettierignore | 5 +- README.md | 4 +- examples/web/app.css | 92 + examples/{web.js => web/app.js} | 7 +- examples/{web.html => web/index.html} | 98 +- examples/{web.png => web/screenshot.png} | Bin package-lock.json | 34764 +++++++-------------- package.json | 29 +- rollup.config.js | 43 + src/mopidy.js | 6 +- 10 files changed, 11589 insertions(+), 23459 deletions(-) create mode 100644 examples/web/app.css rename examples/{web.js => web/app.js} (98%) rename examples/{web.html => web/index.html} (60%) rename examples/{web.png => web/screenshot.png} (100%) create mode 100644 rollup.config.js diff --git a/.prettierignore b/.prettierignore index c98b99c..ca36288 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ -.cache/ -dist/ +/.cache/ +/dist/ +/node_modules/ diff --git a/README.md b/README.md index 6502f35..c69f5a4 100644 --- a/README.md +++ b/README.md @@ -387,7 +387,7 @@ mopidy = null; ### Web application -![Web demo](examples/web.png) +![Web demo](examples/web/screenshot.png) In the `examples/` directory of the Git repo, you can find a small demo web application using Mopidy.js. The left half of the screen shows what's @@ -411,7 +411,7 @@ To run the demo application yourself: 5. Run `npm start` to run the demo application at http://localhost:1234/. This setup uses hot module reloading, so any changes you do to the demo -application files, `examples/web.{html,js}`, will instantly be visible in +application files, `examples/web/*`, will instantly be visible in your browser. Thus, this can serve as a nice playing ground to get to know the capabilities of Mopidy and Mopidy.js. diff --git a/examples/web/app.css b/examples/web/app.css new file mode 100644 index 0000000..a545792 --- /dev/null +++ b/examples/web/app.css @@ -0,0 +1,92 @@ +html, +body { + box-sizing: border-box; + margin: 0; + padding: 0; + height: 100%; +} + +body { + background: #333; + color: #ccc; + font-family: "Roboto", "Open Sans", sans-serif; + font-size: 1.2rem; + line-height: 1.4; +} + +.container { + display: grid; + grid-template-columns: 1fr 1fr; + align-content: stretch; + height: 100%; +} + +.player { + grid-column: 1; + padding: 2rem; + + font-weight: 300; + text-align: center; +} + +.event-log { + grid-column: 2; + margin: 0; + padding: 1rem; + max-height: 100vh; + overflow: auto; + + background: #444; + font-family: "Ubuntu Sans Mono", "Open Sans Mono", monospace; + font-size: 0.7rem; + line-height: 1.2; +} + +h1 { + font-size: 1.4rem; + font-weight: 300; +} + +button { + background: #444; + color: #ccc; + border: none; + padding: 0.4rem 0.8rem; +} + +button:hover { + background: #555; +} + +button:active, +button.active { + background: #999; + color: #fff; +} + +code { + padding: 0.1rem; +} + +.help { + margin-top: 2rem; +} + +.cover { + margin: auto; + max-width: 80%; +} +.cover img { + height: auto; + max-width: 100%; +} + +.controls p { + display: inline-block; + margin: 0.5rem; + text-align: center; +} + +.state { + font-size: 0.8rem; +} diff --git a/examples/web.js b/examples/web/app.js similarity index 98% rename from examples/web.js rename to examples/web/app.js index 6f074ad..5643323 100644 --- a/examples/web.js +++ b/examples/web/app.js @@ -1,8 +1,6 @@ -/* global window */ +/* global window, Mopidy */ /* eslint no-console:off, camelcase:off */ -import Mopidy from "../src/mopidy"; - const mopidy = new Mopidy({ webSocketUrl: "ws://localhost:6680/mopidy/ws", }); @@ -82,6 +80,9 @@ function updateCover(trackUri, images) { } function updateCurrentTrack(track) { + if (track === null) { + return; + } const artists = track.artists.map((a) => a.name).join(", "); let albumName = track.album.name; if (track.album.date) { diff --git a/examples/web.html b/examples/web/index.html similarity index 60% rename from examples/web.html rename to examples/web/index.html index e69d91c..c1f0e40 100644 --- a/examples/web.html +++ b/examples/web/index.html @@ -2,101 +2,9 @@ Mopidy.js demo - - + + +