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

53
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,11 +201,15 @@ ${ this.details ?
</div> </div>
` : html``} ` : html``}
<!-- start of green -->
<div class="player-controls">
<!-- header -->
<header> <header>
<h2>${this.details.tracks ? this.details?.tracks[this.track].title : this.details.title}</h2> <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>`} ${this.details.tracks ? '' : html`<p class="details">${this.details.details}</p>`}
</header> </header>
<!-- start of playback indicator -->
<div class="info"> <div class="info">
${this._getTrack.render({ ${this._getTrack.render({
complete: () => html` complete: () => html`
@ -239,6 +244,7 @@ ${ this.details ?
${this.audio} ${this.audio}
</div> </div>
<!-- controls -->
<div class="controls"> <div class="controls">
<div class="buttons"> <div class="buttons">
<mm-icon name="skip-prev" @click=${this._prevTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon> <mm-icon name="skip-prev" @click=${this._prevTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
@ -248,8 +254,12 @@ ${ this.details ?
<mm-icon name="skip-next" @click=${this._nextTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon> <mm-icon name="skip-next" @click=${this._nextTrack} ?disabled=${!this.duration || this.getAudio?.status == 1}></mm-icon>
</div> </div>
</div> </div>
<!-- end of green -->
</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 {