From 1fedcdf92bf01271ea06c2ca8c844983bd25aaa8 Mon Sep 17 00:00:00 2001 From: suroh Date: Tue, 10 Oct 2023 13:04:35 +0200 Subject: [PATCH] update video player, and json generator --- .../data/documentaries_interviews_audio.json | 42 +-- .../data/documentaries_interviews_video.json | 32 ++- public/data/music_sound_ecm.json | 38 ++- public/data/music_sound_various.json | 51 +++- scripts/files2json.js | 33 ++- src/api/Router.js | 2 +- src/components/Footer.js | 69 ++++- src/components/HorizontalScroller.js | 3 + src/components/ModularPlayer.js | 25 +- src/components/NavCard.js | 7 +- src/components/VerticalCard.js | 4 +- src/components/VideoPlayer.js | 247 +----------------- src/controllers/volume.js | 22 -- src/views/home.js | 10 +- src/views/videos.js | 6 +- 15 files changed, 217 insertions(+), 374 deletions(-) delete mode 100644 src/controllers/volume.js diff --git a/public/data/documentaries_interviews_audio.json b/public/data/documentaries_interviews_audio.json index b4a641f..b9e0e27 100644 --- a/public/data/documentaries_interviews_audio.json +++ b/public/data/documentaries_interviews_audio.json @@ -1,42 +1,50 @@ [ { - "title": "", + "title": "Late Junction", + "details": "BBC, 2019", "parent_dir": "documentaries_interviews_audio", - "media": "-21 08_Late Junction_2019 - Meredith Monk v2 BBC.mp3" + "media": "-21 08_Late Junction_2019 - Meredith Monk v2 BBC" }, { - "title": "", + "title": "Speaking of Music", + "details": "Meredith Monk, 1984 Part 1 of 2", "parent_dir": "documentaries_interviews_audio", - "media": "-22 02_Speaking of Music Meredith Monk 1984 Part 1 of 2.mp3" + "media": "-22 02_Speaking of Music Meredith Monk 1984 Part 1 of 2" }, { - "title": "", + "title": "Speaking of Music", + "details": "Meredith Monk, 1984 Part 2 of 2", "parent_dir": "documentaries_interviews_audio", - "media": "-23 03_Speaking of Music_ Meredith Monk 1984 Part 2 of 2.mp3" + "media": "-23 03_Speaking of Music_ Meredith Monk 1984 Part 2 of 2" }, { - "title": "", + "title": "Interview with I Frechl-Bayn Rundfunk", + "details": "1986", "parent_dir": "documentaries_interviews_audio", - "media": "-24 04 Meredith Monk Interview with I Ferchl_Bayn Rundfunk 1986.mp3" + "media": "-24 04 Meredith Monk Interview with I Ferchl_Bayn Rundfunk 1986" }, { - "title": "", + "title": "Terry Gross Interview", + "details": "1987", "parent_dir": "documentaries_interviews_audio", - "media": "-25 05 Terry Gross interview_1987.mp3" + "media": "-25 05 Terry Gross interview_1987" }, { - "title": "", + "title": "Interview with David Garland", + "details": "WNYC, Sacred Sundays, 2008", "parent_dir": "documentaries_interviews_audio", - "media": "-26 06 WNYC Interview w_ David Garland_SacredSundays_2008.mp3" + "media": "-26 06 WNYC Interview w_ David Garland_SacredSundays_2008" }, { - "title": "", + "title": "Frosty McNeil and Meredith Monk", + "details": "Fireside Chat, Red Bull Radio", "parent_dir": "documentaries_interviews_audio", - "media": "-27 07_Red Bull Radio_Fireside Chat_M frosty McNeil and MM_41119.mp3" + "media": "-27 07_Red Bull Radio_Fireside Chat_M frosty McNeil and MM_41119" }, { - "title": "", + "title": "Late Junction", + "details": "BBC, 2019", "parent_dir": "documentaries_interviews_audio", - "media": "-28 08_Late Junction_2019 - Meredith Monk v2 BBC.mp3" + "media": "-28 08_Late Junction_2019 - Meredith Monk v2 BBC" } -] \ No newline at end of file +] diff --git a/public/data/documentaries_interviews_video.json b/public/data/documentaries_interviews_video.json index a31a54e..720032b 100644 --- a/public/data/documentaries_interviews_video.json +++ b/public/data/documentaries_interviews_video.json @@ -1,51 +1,61 @@ [ { - "title": "", + "title": "Michael Blackwood Making Dances", + "details": "", "parent_dir": "documentaries_interviews_video", "media": "--2 MichaelBlackwoodMakingDances.m4v" }, { - "title": "", + "title": "ECM 1981", + "details": "2019", "parent_dir": "documentaries_interviews_video", "media": "--3 ECM1981 Video Meredith Monk V2_2019.m4v" }, { - "title": "", + "title": "Andere Avantgarde", + "details": "TV Interview 1982", "parent_dir": "documentaries_interviews_video", "media": "--4 Meredith Monk_Andere Avantgarde_TV Interview_1982_.m4v" }, { - "title": "", + "title": "New Sounds for a New World", + "details": "1982", "parent_dir": "documentaries_interviews_video", "media": "--5 New Sounds for a New World_1982.m4v" }, { - "title": "", + "title": "Four American Composers", + "details": "PeterGreenaway", "parent_dir": "documentaries_interviews_video", "media": "--6 Four American Composers_Peter Greenaway.m4v" }, { - "title": "", + "title": "BBC Late Show", + "details": "", "parent_dir": "documentaries_interviews_video", "media": "--7 bbc_late_show (Original).m4v" }, { - "title": "", + "title": "Documentary by Sidsel Mundal", + "details": "Norwegian Television, 1994", "parent_dir": "documentaries_interviews_video", "media": "--8 1994 documentary by Sidsel Mundal_for Norwegian Telev.m4v" }, { - "title": "", + "title": "Television Documentary", + "details": "Polish Television, 1995", "parent_dir": "documentaries_interviews_video", "media": "--9 Meredith Monk - Polish Television Documentary (1995).m4v" }, { - "title": "", + "title": "Inner Voice", + "details": "", "parent_dir": "documentaries_interviews_video", "media": "-12 MeredithMonk_Inner Voice.m4v" }, { - "title": "", + "title": "Lecutre Performance", + "details": "Bennington College, 11 March 2011", "parent_dir": "documentaries_interviews_video", "media": "-13 Bennington College lecture performance 3.11.11.m4v" }, @@ -79,4 +89,4 @@ "parent_dir": "documentaries_interviews_video", "media": "-19 Coffee and Composition with Meredith Monk_2021.m4v" } -] \ No newline at end of file +] diff --git a/public/data/music_sound_ecm.json b/public/data/music_sound_ecm.json index ef4c5da..e5f9fa1 100644 --- a/public/data/music_sound_ecm.json +++ b/public/data/music_sound_ecm.json @@ -1,6 +1,7 @@ [ { - "title": "", + "title": "Dolmen Music", + "details": "", "parent_dir": "music_sound_ecm", "media": "-43 Dolmen Music", "album": true, @@ -13,7 +14,8 @@ ] }, { - "title": "", + "title": "Turtle Dreams", + "details": "", "parent_dir": "music_sound_ecm", "media": "-44 Turtle Dreams", "album": true, @@ -26,7 +28,8 @@ ] }, { - "title": "", + "title": "Do You Be", + "details": "", "parent_dir": "music_sound_ecm", "media": "-45 Do You Be", "album": true, @@ -46,7 +49,8 @@ ] }, { - "title": "", + "title": "Book of Days", + "details": "", "parent_dir": "music_sound_ecm", "media": "-46 Book of Days", "album": true, @@ -68,7 +72,8 @@ ] }, { - "title": "", + "title": "Facing North", + "details": "", "parent_dir": "music_sound_ecm", "media": "-47 Facing North", "album": true, @@ -90,7 +95,8 @@ ] }, { - "title": "", + "title": "Atlas", + "details": "", "parent_dir": "music_sound_ecm", "media": "-48 ATLAS an opera in three parts 2-CD album", "album": true, @@ -123,7 +129,8 @@ ] }, { - "title": "", + "title": "Volcano Songs", + "details": "", "parent_dir": "music_sound_ecm", "media": "-49 Volcano Songs", "album": true, @@ -145,7 +152,8 @@ ] }, { - "title": "", + "title": "Mercy", + "details": "", "parent_dir": "music_sound_ecm", "media": "-50 mercy", "album": true, @@ -167,7 +175,8 @@ ] }, { - "title": "", + "title": "Impermenance", + "details": "", "parent_dir": "music_sound_ecm", "media": "-51 impermanance", "album": true, @@ -191,7 +200,8 @@ ] }, { - "title": "", + "title": "Songs of Ascension", + "details": "", "parent_dir": "music_sound_ecm", "media": "-52 Songs of Ascension", "album": true, @@ -220,7 +230,8 @@ ] }, { - "title": "", + "title": "Piano Songs", + "details": "", "parent_dir": "music_sound_ecm", "media": "-53 Piano Songs", "album": true, @@ -240,7 +251,8 @@ ] }, { - "title": "", + "title": "On Behalf of Nature", + "details": "", "parent_dir": "music_sound_ecm", "media": "-54 On Behalf of Nature", "album": true, @@ -266,4 +278,4 @@ "-54-19 Monk_ Spider Web Anthem.mp3" ] } -] \ No newline at end of file +] diff --git a/public/data/music_sound_various.json b/public/data/music_sound_various.json index 449063d..d5581c0 100644 --- a/public/data/music_sound_various.json +++ b/public/data/music_sound_various.json @@ -1,4 +1,45 @@ [ + { + "title": "", + "parent_dir": "music_sound_various", + "media": "MONK MIX Remixes and Interpretations of Music by Meredith Monk CD1", + "album": true, + "tracks": [ + "01 Gotham Lullaby (Featuring Björk With The Brodsky Quartet).mp3", + "02 Caldera Chimera (Featuring Gabriel Prokofiev Remix).mp3", + "03 Click Song #1 (Featuring Don Byron).mp3", + "04 Double Fiesta (Featuring Meredith Monk & Bang On A Can).mp3", + "05 Astronaut Anthem (Featuring Sakamoto Remix).mp3", + "06 Shaking (Featuring Lukas Ligeti) [Pyrolator Remix].mp3", + "07 Last Song (Featuring Caetano Veloso).mp3", + "08 Fat Stream (Featuring Nico_s Piano Homage).mp3", + "09 Wheel (Featuring John Hollenbeck & Theo Bleckmann).mp3", + "10 Scared Song (Featuring Pamela Z).mp3", + "11 Boat Song (Featuring Rubin Kodheli).mp3", + "12 Gathering (Featuring Lee Ranaldo Remix).mp3", + "13 Evening (Featuring Henry Grimes Remix).mp3" + ] + }, + { + "title": "", + "parent_dir": "music_sound_various", + "media": "MONK MIX Remixes and Interpretations of Music by Meredith Monk CD2", + "album": true, + "tracks": [ + "01 Dawn (feat. Dj Spooky Remix).mp3", + "02 Rain (feat. Vijay Iyer Revelation Mix Featuring Latasha N. Nevada Diggs).mp3", + "03 Atlas Ascending (feat. Todd Reynolds Remix).mp3", + "04 Epic (feat. Dj Rekha & Raj Star Remix).mp3", + "05 Memory Song (feat. Miho Hatori Remix).mp3", + "06 Travellers (feat. King Britt Idm Mix).mp3", + "07 Night Vs. Lullaby (feat. Matt Marks Remix).mp3", + "08 Double Fiesta (feat. Arto Lindsay Remix).mp3", + "09 Long Shadows (feat. Scanner Entwine Mix).mp3", + "10 Dolmen Music, Part 1 (feat. Shodekeh's Embody & Continuums Remix).mp3", + "11 Braid (feat. High Priest _ Hprizm Ghostlover Remix).mp3", + "12 Vocal_ Mill Feuille (feat. Sussan Deyhim Remix).mp3" + ] + }, { "title": "", "parent_dir": "music_sound_various", @@ -79,16 +120,6 @@ "_58_09 Double Fiesta.mp3" ] }, - { - "title": "", - "parent_dir": "music_sound_various", - "media": "_59 MONK MIX Remixes and Interpretations of Music by Meredith Monk 2-CD", - "album": true, - "tracks": [ - "MONK MIX CD1", - "MONK MIX CD2" - ] - }, { "title": "", "parent_dir": "music_sound_various", diff --git a/scripts/files2json.js b/scripts/files2json.js index 4d1c55f..504d418 100644 --- a/scripts/files2json.js +++ b/scripts/files2json.js @@ -6,6 +6,8 @@ async function main() { let mediaDir = '' let outputDir = '' let recurse = false + let imagesOnly = false + let dryRun = false // get command line arguments process.argv.forEach(function (val, index) { @@ -15,6 +17,14 @@ async function main() { mediaDir = process.argv[index + 1] || '' } + if (val == '--dry-run') { + dryRun = true + } + + if (val == '--images') { + imagesOnly = true + } + if (val == '-r' || val == '-R') { recurse = true } @@ -30,8 +40,18 @@ async function main() { return 0 } + // variable to hold media + let media = [] + let images = [] + // read directory - const media = await fs.readdir(mediaDir) + const dirList = await fs.readdir(mediaDir) + + if (!recurse) { + media = dirList.filter(i => i.match(/.(mp\d|m\d\w)$/i)) + images = dirList.filter(i => i.match(/.(jp\w*g|png)$/i)) + } + // clean up directory for json let parent_dir = mediaDir @@ -42,12 +62,14 @@ async function main() { outputDir = '.' } - const obj = await Promise.all(media.map(async m => { + const obj = await Promise.all(media.map(async (m, i) => { const _r = { title: '', + details: '', parent_dir, media: m, + image: images[i], } if (recurse) { @@ -63,7 +85,12 @@ async function main() { const json = JSON.stringify(obj, null, 2) let output = `${parent_dir}.json` - fs.writeFile(path.join(outputDir, output), json) + + if (dryRun) { + console.log(json) + } else { + fs.writeFile(path.join(outputDir, output), json) + } } diff --git a/src/api/Router.js b/src/api/Router.js index 24ec7eb..0f03e55 100644 --- a/src/api/Router.js +++ b/src/api/Router.js @@ -107,7 +107,7 @@ export default new Router({ plugins: [ lazy(() => import('../views/videos.js')) ], - render: () => html`` + render: () => html`` }, { path: resolveRouterPath('images'), diff --git a/src/components/Footer.js b/src/components/Footer.js index ebfbaa4..d2acabc 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -6,26 +6,66 @@ import './SvgIcon.js' class Footer extends LitElement { static properties = { - path: { type: String } + path: { type: String }, + navigation: { state: true } } constructor() { super() this.path = '' + this.navigation = [] } firstUpdated() { + this.renderRoutes() + } + + renderRoutes() { + const grouped = {} + const ungrouped = Router.routes.filter(r => !r.group && !r.hide) + + Router.routes.forEach(r => { + if (r.group) { + if (!grouped[r.group]) { + grouped[r.group] = [] + } + grouped[r.group].push(r) + } + }) + + + const sortedArray = ungrouped + sortedArray.splice(1, 0, Object.values(grouped)[0]) + sortedArray.splice(2, 0, Object.values(grouped)[1]) + + this.navigation = sortedArray + } + + renderLink(r, first = false) { + return html` + ${first ? html`` : '' } + + + + ${r.short} + + + ` } render() { return html` ` } @@ -34,15 +74,22 @@ class Footer extends LitElement { :host { background: var(--neutral-200, white); box-shadow: 0 0.5em 10px 10px #00000020; + font-size: 0.9em; } a { display: flex; - align-items: center; - gap: 0.5em; + padding-block: 0.25em; + gap: 0.25em; + align-items: end; + padding-inline: 0.5em; color: var(--green-400, blue); text-decoration: none; text-transform: capitalize; + + & > span { + line-height: 0.9; + } } a > svg { @@ -55,10 +102,8 @@ class Footer extends LitElement { color: var(--neutral-900, black); } - .unicon { - width: 1em; - height: 1em; - outline: thin solid red; + .break { + border-inline-start: thin solid var(--green-400); } footer { diff --git a/src/components/HorizontalScroller.js b/src/components/HorizontalScroller.js index a02e13f..a2ea687 100644 --- a/src/components/HorizontalScroller.js +++ b/src/components/HorizontalScroller.js @@ -19,9 +19,12 @@ class HorizontalScroller extends LitElement { :host { --col-width: 10em; --gap: 1em; + display: flex; + padding-block-end: 0.5em; } .scroller { + flex-grow: 1; display: grid; gap: var(--gap); grid-auto-flow: column; diff --git a/src/components/ModularPlayer.js b/src/components/ModularPlayer.js index 56a737a..bccac66 100644 --- a/src/components/ModularPlayer.js +++ b/src/components/ModularPlayer.js @@ -2,16 +2,12 @@ import { LitElement, html, css,unsafeCSS } from 'lit' import { Task } from '@lit-labs/task' import { formatSeconds } from '../api/utils' -import VolumeController from '../controllers/volume.js' - import MainCSS from '../assets/styles/main.scss?inline' import './RangeSlider.js' import './Loading.js' class ModularPlayer extends LitElement { - volCtrl = new VolumeController(this) - static properties = { // property details: { type: Object }, @@ -68,7 +64,6 @@ class ModularPlayer extends LitElement { this.audio.addEventListener('loadstart', () => { this.loading = true - this.audio.volume = this.volCtrl.volume }) this.audio.addEventListener('canplay', () => { @@ -165,13 +160,6 @@ class ModularPlayer extends LitElement { } } - _volHandler(evt) { - if (evt.detail) { - this.volCtrl.update(evt.detail.value) - this.audio.volume = this.volCtrl.volume - } - } - _progressCalc() { let percentage = 0 @@ -249,15 +237,6 @@ ${ this.details ? - -
- - -
` : ''}` @@ -284,7 +263,7 @@ ${ this.details ? } .player:has(.tracklist) { - grid-template-rows: 0.7fr 0.5fr 0.3fr 1fr; + grid-template-rows: 60% 0.5fr 0.3fr 1fr; padding-block-end: 2em; gap: 0; @@ -323,7 +302,7 @@ ${ this.details ? --tracklist-padding: calc(var(--padding) * 2); position: relative; background: var(--neutral-gradient-400); - height: 20em; + height: 100%; > h2 { margin-inline: var(--tracklist-padding); diff --git a/src/components/NavCard.js b/src/components/NavCard.js index c0362f2..473ab32 100644 --- a/src/components/NavCard.js +++ b/src/components/NavCard.js @@ -57,11 +57,11 @@ class NavCard extends LitElement { :host { --highlight-color: black; --shadow: 0 0 0px transparent; + --inline-padding: 0.85em; + --block-padding: 1em; height: 100%; background: linear-gradient(to bottom, rgb(255 255 255 / 0.9) 0%, rgb(159 159 159 / 0.6) 100%); border-radius: 0.75em; - padding: 1em; - padding-block-start: 1.25em; box-shadow: 0px 0px 10px #00000060; text-shadow: var(--shadow); } @@ -70,7 +70,7 @@ class NavCard extends LitElement { display: grid; grid-auto-flow: rows; gap: 0.5em; - padding: 0.25em; + margin-inline: var(--inline-padding); cursor: pointer; font-size: 1.65em; } @@ -84,6 +84,7 @@ class NavCard extends LitElement { .title { padding-bottom: 0.75em; + margin-block-start: 1em; font-size: 0.75em; text-align: center; border-bottom: thin solid var(--highlight-color); diff --git a/src/components/VerticalCard.js b/src/components/VerticalCard.js index 7771f1d..9afe6e0 100644 --- a/src/components/VerticalCard.js +++ b/src/components/VerticalCard.js @@ -51,7 +51,7 @@ class VerticalCard extends LitElement { div { height: 100%; display: grid; - grid-template-rows: auto 0.2fr; + grid-template-rows: 75% 25%; background: lightgrey; line-height: 1; overflow: hidden; @@ -68,7 +68,7 @@ class VerticalCard extends LitElement { picture { display: block; background: var(--image-placeholder); - aspect-ratio: 1 / 1; + /* aspect-ratio: 1 / 1; */ overflow: hidden; } diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js index cdf2d73..8936e1d 100644 --- a/src/components/VideoPlayer.js +++ b/src/components/VideoPlayer.js @@ -1,57 +1,23 @@ import { LitElement, css, html } from 'lit' -import VolumeController from '../controllers/volume.js' - -import './RangeSlider.js' -import './SvgIcon.js' -import { formatSeconds } from '../api/utils.js' - class VideoPlayer extends LitElement { - volCtrl = new VolumeController(this) - static properties = { media: { type: String }, autoplay: { type: Boolean }, videoEl: { state: true }, - playing: { state: true }, - controls: { state: true }, - ctrlTimer: { state: true }, - position: { state: true }, - duration: { state: true }, - remain: { state: true }, - volumeOpen: { state: true }, } constructor() { super() this.media = '' - this.hostHeight = 0 - this.hostWidth = 0 this.playing = false - this.controls = true - this.ctrlTimer = {} - this.position = 0 - this.duration = 0 - this.remain = true - this.volumeOpen = false this.autoplay = false this.videoEl = document.createElement('video') + this.videoEl.controls = true this.videoEl.playsInline = true this.videoEl.preload = 'metadata' } - firstUpdated() { - this.videoEl.addEventListener('loadeddata', () => { - this.duration = this.videoEl.duration - }) - - this.videoEl.addEventListener('timeupdate', () => { - this.position = this.videoEl.currentTime - }) - - this.videoEl.volume = this.volCtrl.volume - } - willUpdate(att) { if (att.has('media')) { console.log(this.media) @@ -60,123 +26,15 @@ class VideoPlayer extends LitElement { if (this.autoplay) { this.playing = true this.videoEl.play() - this.interact() } } this.update() } - togglePlay() { - if (this.playing) { - this.videoEl.pause() - } else { - this.videoEl.play() - } - this.playing = !this.playing - } - - interact() { - if (this.playing) { - // show controls - this.controls = true - clearTimeout(this.ctrlTimer) - - // timeout - this.ctrlTimer = setTimeout(() => { - if (this.playing) { - this.volumeOpen = false - this.controls = false - } - }, 2000) - } - } - - toggleFullscreen() { - const container = this.shadowRoot.querySelector('.videoContainer') - - if (container.webkitSupportsFullscreen) { - container.webkitEnterFullscreen() - return - } - - if (document.fullscreenElement !== null) { - document.exitFullscreen() - container.setAttribute('data-fullscreen', false) - } else { - container.requestFullscreen() - container.setAttribute('data-fullscreen', true) - } - } - - toggleDuration() { - console.log(this.remain) - this.remain = !this.remain - } - - seek({ detail }) { - if (detail) { - this.interact() - - this.videoEl.currentTime = detail.value - this.position = detail.value - } - } - - _toggleVolume() { - this.interact() - - this.volumeOpen = !this.volumeOpen - } - - _volHandler(evt) { - this.interact() - - if (evt.detail) { - this.volCtrl.update(evt.detail.value) - this.videoEl.volume = this.volCtrl.volume - } - } - render() { return html`
${this.videoEl} - -
-
- - -
- -
- -
-
- -
- -
-
- -
- - - -
- ${formatSeconds(this.position)} - ${ this.remain ? `-${formatSeconds(this.duration - this.position)}` : formatSeconds(this.duration)} -
-
-
` } @@ -196,109 +54,6 @@ class VideoPlayer extends LitElement { height: 100%; background: black; } - - .controls { - position: absolute; - padding-inline: 0.75em; - padding-block: 0.5em; - left: 0; - right: 0; - bottom: 0; - z-index: 5; - transition: opacity 0.25s ease; - - .buttons { - display: flex; - gap: 0.75em; - padding-block-start: 0.5em; - } - - & mm-icon { - font-size: 1.25em; - width: 1em; - } - - } - - .volume-container { - position: relative; - margin-inline-start: auto; - margin-block-end: 0.75em; - - & .popout { - display: flex; - align-items: center; - position: absolute; - width: 6em; - height: 100%; - left: 0; - top: 0; - transform: translateX(calc(calc(100% + 0.5em) * -1)); - overflow: hidden; - - & mm-range { - transform: translateX(calc(100% + 1em)); - transition: transform 0.125s ease-in-out; - } - - &.open mm-range { - transform: translateX(0); - } - } - } - - .time { - display: flex; - color: white; - font-size: 0.65em; - padding-inline: 0.125em; - padding-block: 1em 0.5em; - } - - .dur { - margin-inline-start: auto; - } - - mm-icon { - display: block; - color: white; - } - - mm-range { - --track-height: 0.3em; - --thumb-size: 0.8em; - --track-color: #ffffff50; - } - - .touchbox { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - inset: 0; - opacity: 1; - transition: opacity 0.25s ease; - } - - .playPause { - display: grid; - align-items: center; - justify-content: center; - font-size: 2.25em; - transition: opacity 0.25 ease; - } - - .playPause > mm-icon { - inset: 0; - grid-column: 1 / span 1; - grid-row: 1 / span 1; - } - - .invisible { - pointer-events: none; - opacity: 0; - } - ` } diff --git a/src/controllers/volume.js b/src/controllers/volume.js deleted file mode 100644 index 7c5c41a..0000000 --- a/src/controllers/volume.js +++ /dev/null @@ -1,22 +0,0 @@ -export default class VolumeController { - volume = 0 - - constructor(host) { - this.host = host - this.host.addController(this) - } - - hostConnected() { - if (!localStorage.getItem('deviceVolume')) { - localStorage.setItem('deviceVolume', 0.6) - } - - this.volume = localStorage.getItem('deviceVolume') - } - - update(val) { - console.log(val) - this.volume = val - localStorage.setItem('deviceVolume', val) - } -} diff --git a/src/views/home.js b/src/views/home.js index 287378d..3f5216e 100644 --- a/src/views/home.js +++ b/src/views/home.js @@ -17,8 +17,6 @@ class Home extends LitElement { firstUpdated() { this.renderRoutes() - - console.log(this.navigation) } renderRoutes() { @@ -48,7 +46,7 @@ class Home extends LitElement {