suroh
/
mm.site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated modular player to have fixed columns

This commit is contained in:
suroh 2023-10-12 11:44:20 +02:00
parent 76235d5cbd
commit b5a7d83885
1 changed files with 82 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/ModularPlayer.js
View File

@ -176,9 +176,10 @@ class ModularPlayer extends LitElement {
render() { render() {
return html` return this.details ? html`
${ this.details ? <div class="player ${this.details.tracks ? 'tracks' : 'single'}">
html`<div class="player">
<!-- render the tracklist -->
${this.details.tracks ? html` ${this.details.tracks ? html`
<div class="tracklist"> <div class="tracklist">
<header> <header>
@ -200,56 +201,65 @@ ${ this.details ?
</div> </div>
` : html``} ` : html``}
<header> <!-- start of green -->
<h2>${this.details.tracks ? this.details?.tracks[this.track].title : this.details.title}</h2> <div class="player-controls">
${this.details.tracks ? '' : html`<p class="details">${this.details.details}</p>`} <!-- header -->
</header> <header>
<h2>${this.details.tracks ? this.details?.tracks[this.track].title : this.details.title}</h2>
${this.details.tracks ? '' : html`<p class="details">${this.details.details}</p>`}
</header>
<div class="info"> <!-- start of playback indicator -->
${this._getTrack.render({ <div class="info">
complete: () => html` ${this._getTrack.render({
<span class="time_pos">${formatSeconds(this.position)}</span> complete: () => html`
<span class="time_pos">${formatSeconds(this.position)}</span>
${this.details?.tracks ? ${this.details?.tracks ?
html`<mm-range html`<mm-range
value=${this.position}
max=${this.duration}
step="0.1"
@input=${this._seekTrack}
></mm-range>`
: html`
<div class="waveform">
<mm-range
value=${this.position} value=${this.position}
max=${this.duration} max=${this.duration}
step="0.1" step="0.1"
@input=${this._seekTrack} @input=${this._seekTrack}
class="progress" ></mm-range>`
></mm-range> : html`
<img class="wav-img" loading="eager" src="${this.details.image}"> <div class="waveform">
</div> <mm-range
` value=${this.position}
} max=${this.duration}
step="0.1"
@input=${this._seekTrack}
class="progress"
></mm-range>
<img class="wav-img" loading="eager" src="${this.details.image}">
</div>
`
}
<span class="time_dur">${formatSeconds(this.duration)}</span> <span class="time_dur">${formatSeconds(this.duration)}</span>
`, `,
error: (err) => err error: (err) => err
})} })}
${this.audio} ${this.audio}
</div>
<div class="controls">
<div class="buttons">
<mm-icon name="skip-prev" @click=${this._prevTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
<mm-icon name="skip-b15" @click=${this._skipBackward} ?disabled=${!this.duration || this.getAudio?.status == 1} class="skip15"></mm-icon>
<mm-icon name="${this.playing ? 'pause' : 'play'}" @click=${this._togglePlay} ?disabled=${!this.duration || this.getAudio?.status == 1} class=${this.playing ? 'pause' : 'play'}></mm-icon>
<mm-icon name="skip-f15" @click=${this._skipForward} ?disabled=${!this.duration || this.getAudio?.status == 1} class="skip15"></mm-icon>
<mm-icon name="skip-next" @click=${this._nextTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
</div> </div>
<!-- controls -->
<div class="controls">
<div class="buttons">
<mm-icon name="skip-prev" @click=${this._prevTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
<mm-icon name="skip-b15" @click=${this._skipBackward} ?disabled=${!this.duration || this.getAudio?.status == 1} class="skip15"></mm-icon>
<mm-icon name="${this.playing ? 'pause' : 'play'}" @click=${this._togglePlay} ?disabled=${!this.duration || this.getAudio?.status == 1} class=${this.playing ? 'pause' : 'play'}></mm-icon>
<mm-icon name="skip-f15" @click=${this._skipForward} ?disabled=${!this.duration || this.getAudio?.status == 1} class="skip15"></mm-icon>
<mm-icon name="skip-next" @click=${this._nextTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
</div>
</div>
<!-- end of green -->
</div> </div>
</div> </div>
` : ''}` <!-- end of player -->
`
: ''
} }
static styles = [ css`${unsafeCSS(MainCSS)}`, css` static styles = [ css`${unsafeCSS(MainCSS)}`, css`
@ -273,8 +283,7 @@ ${ this.details ?
} }
.player:has(.tracklist) { .player:has(.tracklist) {
grid-template-rows: 67% 1fr 1fr 1fr; grid-template-rows: 60% 40%;
padding-block-end: 2em;
gap: 0; gap: 0;
& > header { & > header {
@ -284,10 +293,38 @@ ${ this.details ?
& .info { & .info {
padding-block-end: 1.5em; padding-block-end: 1.5em;
} }
& .player-controls {
display: grid;
grid-template-rows: 5em repeat(2, 1fr);
padding: 1em;
& header {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.3em;
}
}
}
@container (min-width: 800px) {
header h2 {
color: pink;
background: red;
}
} }
.player:has(.waveform) { .player:has(.waveform) {
grid-template-rows: 0.7fr 0.7fr 1fr; display: flex;
flex-direction: column;
& .player-controls {
flex-grow: 1;
display: grid;
grid-template-rows: repeat(3, 1fr);
}
& header { & header {
padding-block-start: 1em; padding-block-start: 1em;
@ -307,8 +344,6 @@ ${ this.details ?
} }
.tracklist + header { .tracklist + header {
text-align: center;
font-size: 1.25em;
} }
.tracklist { .tracklist {