Update eslint & airbnb-base

package.json

@@ -32,9 +32,9 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-iife-wrap": "^1.1.0",
     "babel-preset-minify": "^0.5.0",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "2.16.0",
+    "eslint": "^7.16.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },
@@ -43,6 +43,7 @@
     "webpack": "webpack",
     "babel": "babel dist/mini-media-player-bundle.js --out-file dist/mini-media-player-bundle.js",
     "lint": "eslint src/* --ext .js",
+    "lint:fix": "eslint --fix src/* --ext .js",
     "watch": "webpack --watch",
     "dev": "webpack --watch"
   }

src/components/dropdown.js

@@ -15,7 +15,7 @@ class MiniMediaPlayerDropdown extends LitElement {
   }
 
   get selectedId() {
-    return this.items.map(item => item.id).indexOf(this.selected);
+    return this.items.map((item) => item.id).indexOf(this.selected);
   }
 
   onChange(e) {
@@ -36,7 +36,7 @@ class MiniMediaPlayerDropdown extends LitElement {
         .horizontalAlign=${'right'}
         .verticalAlign=${'top'}
         .verticalOffset=${44}
-        @click=${e => e.stopPropagation()}>
+        @click=${(e) => e.stopPropagation()}>
         ${this.icon ? html`
           <ha-icon-button
             class='mmp-dropdown__button icon'
@@ -54,7 +54,7 @@ class MiniMediaPlayerDropdown extends LitElement {
           </mmp-button>
         `}
         <paper-listbox slot="dropdown-content" .selected=${this.selectedId} @iron-select=${this.onChange}>
-          ${this.items.map(item => html`
+          ${this.items.map((item) => html`
             <paper-item value=${item.id || item.name}>
               ${item.icon ? html`<ha-icon .icon=${item.icon}></ha-icon>` : ''}
               ${item.name ? html`<span class='mmp-dropdown__item__label'>${item.name}</span>` : ''}

src/components/groupItem.js

@@ -20,7 +20,7 @@ class MiniMediaPlayerGroupItem extends LitElement {
       <mmp-checkbox
         .checked=${this.checked}
         .disabled=${this.disabled}
-        @change='${e => e.stopPropagation()}'
+        @change='${(e) => e.stopPropagation()}'
         @click='${this.handleClick}'>
         <span>
           ${this.item.name}

src/components/groupList.js

@@ -43,20 +43,20 @@ class MiniMediaPlayerGroupList extends LitElement {
     return html`
       <div class='mmp-group-list'>
         <span class='mmp-group-list__title'>${t(this.hass, 'title.speaker_management')}</span>
-        ${this.entities.map(item => this.renderItem(item, id))}
+        ${this.entities.map((item) => this.renderItem(item, id))}
         <div class='mmp-group-list__buttons'>
           <mmp-button raised ?disabled=${!isGrouped}
-            @click=${e => this.player.handleGroupChange(e, id, false)}>
+            @click=${(e) => this.player.handleGroupChange(e, id, false)}>
             <span>${t(this.hass, 'label.leave')}</span>
           </mmp-button>
           ${isGrouped && isMaster ? html`
             <mmp-button raised
-              @click=${e => this.player.handleGroupChange(e, group, false)}>
+              @click=${(e) => this.player.handleGroupChange(e, group, false)}>
               <span>${t(this.hass, 'label.ungroup')}</span>
             </mmp-button>
           ` : html``}
           <mmp-button raised ?disabled=${!isMaster}
-            @click=${e => this.player.handleGroupChange(e, this.entities.map(item => item.entity_id), true)}>
+            @click=${(e) => this.player.handleGroupChange(e, this.entities.map((item) => item.entity_id), true)}>
             <span>${t(this.hass, 'label.group_all')}</span>
           </mmp-button>
         </div>

src/components/mediaControls.js

@@ -37,7 +37,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
         <div class='flex mmp-media-controls__shuffle'>
           <ha-icon-button
             class='shuffle-button'
-            @click=${e => this.player.toggleShuffle(e)}
+            @click=${(e) => this.player.toggleShuffle(e)}
             .icon=${ICON.SHUFFLE}
             ?color=${this.player.shuffle}>
           </ha-icon-button>
@@ -47,13 +47,13 @@ class MiniMediaPlayerMediaControls extends LitElement {
         <div class='flex mmp-media-controls__media' ?flow=${this.config.flow || this.break}>
           ${!hide.prev ? html`
             <ha-icon-button
-              @click=${e => this.player.prev(e)}
+              @click=${(e) => this.player.prev(e)}
               .icon=${ICON.PREV}>
             </ha-icon-button>` : ''}
           ${this.renderPlayButtons()}
           ${!hide.next ? html`
             <ha-icon-button
-              @click=${e => this.player.next(e)}
+              @click=${(e) => this.player.next(e)}
               .icon=${ICON.NEXT}>
             </ha-icon-button>` : ''}
         </div>
@@ -85,7 +85,7 @@ class MiniMediaPlayerMediaControls extends LitElement {
       ${this.renderMuteButton(muted)}
       <ha-slider
         @change=${this.handleVolumeChange}
-        @click=${e => e.stopPropagation()}
+        @click=${(e) => e.stopPropagation()}
         ?disabled=${muted}
         min=${this.minVol} max=${this.maxVol}
         value=${this.player.vol * 100}
@@ -100,11 +100,11 @@ class MiniMediaPlayerMediaControls extends LitElement {
     return html`
       ${this.renderMuteButton(muted)}
       <ha-icon-button
-        @click=${e => this.player.volumeDown(e)}
+        @click=${(e) => this.player.volumeDown(e)}
         .icon=${ICON.VOL_DOWN}>
       </ha-icon-button>
       <ha-icon-button
-        @click=${e => this.player.volumeUp(e)}
+        @click=${(e) => this.player.volumeUp(e)}
         .icon=${ICON.VOL_UP}>
       </ha-icon-button>
     `;
@@ -123,36 +123,36 @@ class MiniMediaPlayerMediaControls extends LitElement {
       case 'play_pause':
         return html`
           <ha-icon-button
-            @click=${e => this.player.playPause(e)}
+            @click=${(e) => this.player.playPause(e)}
             .icon=${ICON.PLAY[this.player.isPlaying]}>
           </ha-icon-button>
         `;
       case 'stop':
         return html`
           <ha-icon-button
-            @click=${e => this.player.stop(e)}
+            @click=${(e) => this.player.stop(e)}
             .icon=${ICON.STOP.true}>
           </ha-icon-button>
         `;
       case 'play_stop':
         return html`
           <ha-icon-button
-            @click=${e => this.player.playStop(e)}
+            @click=${(e) => this.player.playStop(e)}
             .icon=${ICON.STOP[this.player.isPlaying]}>
           </ha-icon-button>
         `;
       case 'next':
         return html`
           <ha-icon-button
-            @click=${e => this.player.next(e)}
+            @click=${(e) => this.player.next(e)}
             .icon=${ICON.NEXT}>
           </ha-icon-button>
         `;
       default:
         if (!this.player.supportsMute) return;
         return html`
           <ha-icon-button
-            @click=${e => this.player.toggleMute(e)}
+            @click=${(e) => this.player.toggleMute(e)}
             .icon=${ICON.MUTE[muted]}>
           </ha-icon-button>
         `;
@@ -164,13 +164,13 @@ class MiniMediaPlayerMediaControls extends LitElement {
     return html`
       ${!hide.play_pause ? html`
         <ha-icon-button
-          @click=${e => this.player.playPause(e)}
+          @click=${(e) => this.player.playPause(e)}
           .icon=${ICON.PLAY[this.player.isPlaying]}>
         </ha-icon-button>
       ` : html``}
       ${!hide.play_stop ? html`
         <ha-icon-button
-          @click=${e => this.handleStop(e)}
+          @click=${(e) => this.handleStop(e)}
           .icon=${hide.play_pause ? ICON.STOP[this.player.isPlaying] : ICON.STOP.true}>
         </ha-icon-button>
       ` : html``}

src/components/powerstrip.js

@@ -94,7 +94,7 @@ class MiniMediaPlayerPowerstrip extends LitElement {
       ${this.showPowerButton ? html`
         <ha-icon-button class='power-button'
           .icon=${ICON.POWER}
-          @click=${e => this.player.toggle(e)}
+          @click=${(e) => this.player.toggle(e)}
           ?color=${this.powerColor}>
         </ha-icon-button>` : ''}
     `;
@@ -110,7 +110,7 @@ class MiniMediaPlayerPowerstrip extends LitElement {
       return html`
         <ha-icon-button
           .icon=${ICON.PLAY[this.player.isPlaying]}
-          @click=${e => this.player.playPause(e)}>
+          @click=${(e) => this.player.playPause(e)}>
         </ha-icon-button>`;
     else
       return html`

src/components/progress.js

@@ -59,7 +59,7 @@ class MiniMediaPlayerProgress extends LitElement {
         @mousedown=${this.initSeek}
         @mouseup=${this.handleSeek}
         @mouseleave=${this.resetSeek}
-        @click=${e => e.stopPropagation()}
+        @click=${(e) => e.stopPropagation()}
         ?paused=${!this.player.isPlaying}>
         ${this.showTime ? html`
           <div class='mmp-progress__duration'>

src/components/shortcuts.js

@@ -49,14 +49,14 @@ class MiniMediaPlayerShortcuts extends LitElement {
 
     const buttons = this.buttons ? html`
       <div class='mmp-shortcuts__buttons'>
-        ${this.buttons.map(item => html`
+        ${this.buttons.map((item) => html`
           <mmp-button
             style="${styleMap(this.shortcutStyle(item))}"
             raised
             columns=${this.shortcuts.columns}
             ?color=${item.id === active}
             class='mmp-shortcuts__button'
-            @click=${e => this.handleShortcut(e, item)}>
+            @click=${(e) => this.handleShortcut(e, item)}>
             <div align=${this.shortcuts.align_text}>
               ${item.icon ? html`<ha-icon .icon=${item.icon}></ha-icon>` : ''}
               ${item.image ? html`<img src=${item.image}>` : ''}

src/components/soundMenu.js

@@ -16,7 +16,7 @@ class MiniMediaPlayerSoundMenu extends LitElement {
   }
 
   get modes() {
-    return this.player.soundModes.map(mode => ({
+    return this.player.soundModes.map((mode) => ({
       name: mode,
       id: mode,
       type: 'soundMode',

src/components/sourceMenu.js

@@ -15,7 +15,7 @@ class MiniMediaPlayerSourceMenu extends LitElement {
   }
 
   get sources() {
-    return this.player.sources.map(source => ({
+    return this.player.sources.map((source) => ({
       name: source,
       id: source,
       type: 'source',

src/components/tts.js

@@ -28,7 +28,7 @@ class MiniMediaPlayerTts extends LitElement {
       <paper-input id="tts-input" class='mmp-tts__input'
         no-label-float
         placeholder=${this.label}...
-        @click=${e => e.stopPropagation()}>
+        @click=${(e) => e.stopPropagation()}>
       </paper-input>
       <mmp-button class='mmp-tts__button' @click=${this.handleTts}>
         <span>${t(this.hass, 'label.send')}</span>

src/ensureComponents.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 if (!customElements.get('ha-slider')) {
   customElements.define(
     'ha-slider',

src/main.js

@@ -112,7 +112,7 @@ class MiniMediaPlayer extends LitElement {
     if (changedProps.has('player') && this.config.artwork === 'material') {
       this.setColors();
     }
-    return UPDATE_PROPS.some(prop => changedProps.has(prop)) && this.player;
+    return UPDATE_PROPS.some((prop) => changedProps.has(prop)) && this.player;
   }
 
   firstUpdated() {
@@ -152,7 +152,7 @@ class MiniMediaPlayer extends LitElement {
       <ha-card
         class=${this.computeClasses()}
         style=${this.computeStyles()}
-        @click=${e => this.handlePopup(e)}
+        @click=${(e) => this.handlePopup(e)}
         artwork=${config.artwork}
         content=${this.player.content}>
         <div class='mmp__bg'>
@@ -320,10 +320,10 @@ class MiniMediaPlayer extends LitElement {
         ${this.config.info === 'scroll' ? html`
           <div>
             <div class='marquee'>
-              ${items.map(i => html`<span class=${`attr__${i.attr}`}>${i.prefix + i.text}</span>`)}
+              ${items.map((i) => html`<span class=${`attr__${i.attr}`}>${i.prefix + i.text}</span>`)}
             </div>
           </div>` : ''}
-        ${items.map(i => html`<span class=${`attr__${i.attr}`}>${i.prefix + i.text}</span>`)}
+        ${items.map((i) => html`<span class=${`attr__${i.attr}`}>${i.prefix + i.text}</span>`)}
       </div>`;
   }
 

src/model.js

@@ -139,17 +139,17 @@ export default class MediaPlayerObject {
   }
 
   get mediaInfo() {
-    return MEDIA_INFO.map(item => ({
+    return MEDIA_INFO.map((item) => ({
       text: this.attr[item.attr],
       prefix: '',
       ...item,
-    })).filter(item => item.text);
+    })).filter((item) => item.text);
   }
 
   get hasProgress() {
     return !this.config.hide.progress
       && !this.idle
-      && PROGRESS_PROPS.every(prop => prop in this.attr);
+      && PROGRESS_PROPS.every((prop) => prop in this.attr);
   }
 
   get progress() {
@@ -307,8 +307,8 @@ export default class MediaPlayerObject {
   setVolume(e, vol) {
     if (this.config.speaker_group.sync_volume) {
       this.group.forEach((entity) => {
-        const conf = this.config.speaker_group.entities.find(entry => (entry.entity_id === entity))
-          || {};
+        const conf = this.config.speaker_group.entities
+          .find((entry) => (entry.entity_id === entity)) || {};
         let offsetVol = vol;
         if (conf.volume_offset) {
           offsetVol += (conf.volume_offset / 100);

src/utils/colorGenerator.js

@@ -26,7 +26,6 @@ const getContrastRatio = (rgb1, rgb2) => Math.round(
   (contrast(rgb1, rgb2) + Number.EPSILON) * 100,
 ) / 100;
 
-
 const colorGenerator = (colors) => {
   colors.sort((colorA, colorB) => colorB.population - colorA.population);
 
@@ -84,7 +83,7 @@ const colorGenerator = (colors) => {
   return [foregroundColor, backgroundColor.hex];
 };
 
-export default picture => new Vibrant(picture, {
+export default (picture) => new Vibrant(picture, {
   colorCount: 16,
   generator: colorGenerator,
 }).getPalette();

src/utils/misc.js

@@ -2,7 +2,7 @@ const arrayBufferToBase64 = (buffer) => {
   let binary = '';
   const bytes = [].slice.call(new Uint8Array(buffer));
 
-  bytes.forEach(b => binary += String.fromCharCode(b));
+  bytes.forEach((b) => binary += String.fromCharCode(b));
 
   return window.btoa(binary);
 };