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() {
return html`
${ this.details ?
html`<div class="player">
return this.details ? html`
<div class="player ${this.details.tracks ? 'tracks' : 'single'}">
<!-- render the tracklist -->
${this.details.tracks ? html`
<div class="tracklist">
<header>
@ -200,56 +201,65 @@ ${ this.details ?
</div>
` : html``}
<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>
<!-- start of green -->
<div class="player-controls">
<!-- 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">
${this._getTrack.render({
complete: () => html`
<span class="time_pos">${formatSeconds(this.position)}</span>
<!-- start of playback indicator -->
<div class="info">
${this._getTrack.render({
complete: () => html`
<span class="time_pos">${formatSeconds(this.position)}</span>
${this.details?.tracks ?
html`<mm-range
value=${this.position}
max=${this.duration}
step="0.1"
@input=${this._seekTrack}
></mm-range>`
: html`
<div class="waveform">
<mm-range
${this.details?.tracks ?
html`<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>
`
}
></mm-range>`
: html`
<div class="waveform">
<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>
`,
error: (err) => err
})}
<span class="time_dur">${formatSeconds(this.duration)}</span>
`,
error: (err) => err
})}
${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>
${this.audio}
</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>
` : ''}`
<!-- end of player -->
`
: ''
}
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
@ -273,8 +283,7 @@ ${ this.details ?
}
.player:has(.tracklist) {
grid-template-rows: 67% 1fr 1fr 1fr;
padding-block-end: 2em;
grid-template-rows: 60% 40%;
gap: 0;
& > header {
@ -284,10 +293,38 @@ ${ this.details ?
& .info {
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) {
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 {
padding-block-start: 1em;
@ -307,8 +344,6 @@ ${ this.details ?
}
.tracklist + header {
text-align: center;
font-size: 1.25em;
}
.tracklist {