Vue Mobile - Music App Theme

xxxxxxxxxx
 
<template>
  <mdb-container class="white-text text-center d-flex justify-content-center">
    <div class="mask heavy-rain-gradient"></div>
    <mdb-card class="mobile-view">
      <mdb-card-header class="pt-1 pb-1 container-fluid phone-header">
        <mdb-row class="d-flex justify-content-between">
          <mdb-col col="2">
            <mdb-icon size="sm" icon="wifi"></mdb-icon>
          </mdb-col>
          <mdb-col col="3">
            <mdb-icon size="sm" class="pr-2" icon="headphones-alt"></mdb-icon>
            <mdb-icon size="sm" icon="battery-full"></mdb-icon>
          </mdb-col>
        </mdb-row>
      </mdb-card-header>
      <mdb-card-header class="pb-1 app-frame">
        <mdb-icon icon="chevron-left" size="lg" class="float-left mt-1"></mdb-icon>
        <p>
          <mdb-icon class="pr-2" icon="itunes-note" fab />
          <strong>Music App</strong> -
          <small>click play!</small>
        </p>
      </mdb-card-header>
​
      <mdb-card-body class="p-0 m-0 mobile-body d-flex align-items-center">
        <mdb-container fluid>
          <mdb-line-chart :data="chartData" :options="chartOptions" :width="600" :height="200"></mdb-line-chart>
        </mdb-container>
      </mdb-card-body>
      <mdb-card-footer>
        <div class="title-container">
          <p :class="play ? 'music-title' : ''">
            <strong>{{music[active].artist}}</strong>
            - {{music[active].song}}
          </p>
        </div>
        <audio ref="music" preload="true" :src="music[active].source"></audio>
      </mdb-card-footer>
      <mdb-card-footer class="panel">
        <mdb-icon size="2x" class="p-3 pointer" icon="angle-double-left" @click.native="previous" />
        <mdb-icon
          size="2x"
          class="p-3 pointer"
          far
          :icon="play ? 'pause-circle': 'play-circle'"
          @click.native="togglePlay"
        />
        <mdb-icon size="2x" class="p-3 pointer" icon="angle-double-right" @click.native="next" />
      </mdb-card-footer>
      <mdb-card-footer class="app-frame container">
        <mdb-row class="d-flex justify-content-center">
          <mdb-col col="2">
            <mdb-icon class="pointer" icon="facebook-f" fab />
          </mdb-col>
          <mdb-col col="2">
            <mdb-icon class="pointer" icon="twitter" fab />
          </mdb-col>
          <mdb-col col="2">
            <mdb-icon class="pointer" icon="spotify" fab />
          </mdb-col>
        </mdb-row>
      </mdb-card-footer>
    </mdb-card>
  </mdb-container>
</template>

xxxxxxxxxx
 
body {
  background-color: rgba(0, 0, 0, 0.9);
  background-image: url("https://images.pexels.com/photos/1860717/pexels-photo-1860717.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
​
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.4;
}
.phone-header {
  background-color: rgba(7, 9, 15, 1);
}
.app-frame {
  background-color: rgba(7, 9, 15, 0.8);
  border-bottom: 1px solid rgba(230, 147, 226, 0.4);
}
​
.panel {
  background-color: rgba(7, 9, 15, 0.6);
  border-bottom: 1px solid rgba(230, 147, 226, 0.4);
}
​
.mobile-view {
  width: 375px;
  background-color: rgba(7, 9, 15, 0.8);
  border-top: 1px solid rgba(7, 9, 15, 0.8);
  border-left: 1px solid rgba(7, 9, 15, 0.4);
}
​
.mobile-body {
  height: 360px;
  position: relative;
  margin: 10px;
}
​
.title-container {
  position: relative;
  overflow: hidden;
  color: rgba(230, 147, 226, 0.9);
}
.music-title {
  animation-name: title;
  animation-iteration-count: infinite;
  animation-duration: 4s;
}
​
.pointer {
  cursor: pointer;
}
@keyframes title {
  0% {
    transform: translate(-85%);
  }
  50% {
    transform: translate(0);
  }
  100% {
    transform: translate(85%);
  }
}

xxxxxxxxxx
 
import {
  mdbLineChart,
  mdbContainer,
  mdbCard,
  mdbCardHeader,
  mdbCardFooter,
  mdbCardBody,
  mdbIcon,
  mdbRow,
  mdbCol
} from "mdbvue";
import { clearInterval } from "timers";
export default {
  components: {
    mdbLineChart,
    mdbContainer,
    mdbCard,
    mdbCardHeader,
    mdbCardFooter,
    mdbCardBody,
    mdbIcon,
    mdbRow,
    mdbCol
  },
  data() {
    return {
      beat: null,
      play: false,
      chartData: {
        labels: [],
        datasets: [
          {
            label: "new users",
            borderColor: "rgba(230, 147, 226, 0.9)",
            pointRadius: 0,
            borderWidth: 0.8,
            data: []
          }
        ]
      },
      chartOptions: {
        legend: {
          display: false
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          display: false,
          xAxes: [
            {
              gridLines: {
                display: false
              }
            }
          ],
​
          yAxes: [
            {
              gridLines: {
                display: false
              },
              pointLabels: {
                fontSize: 100
              },
              ticks: {
                display: false
              }
            }
          ]
        }
      },
      active: 1,
      music: [
        {
          artist: "Dj Flam",
          song: "Urban Bachata remix",
          source:
            "https://bachataurban.com/download/2/Stefflon%20Don%20-%2016%20Shots%20(%20DJ%20Flam%20-%20Urban%20Bachata%20remix%20).mp3"
        },
        {
          artist: "Arctic Monkeys",
          song: "Do I Wanna Know",
          source:
            "https://bachataurban.com/download/2/Arctic%20Monkeys%20-%20Do%20I%20Wanna%20Know%20(%20DJ%20Flam%20-%20Urban%20Bachata%20remix%20).mp3"
        }
      ]
    };
  },
  methods: {
    randomize(arr) {
      return arr.map((value, i) => {
        if (i < 5 || i > arr.length - 5) {
          return 3000 + Math.floor(Math.random() * 10);
        } else if (
          (i > 5 && i < 10) ||
          (i < arr.length - 5 && i > arr.length - 10)
        ) {
          return 3000 + Math.floor(Math.random() * 100);
        } else {
          return Math.floor(Math.random() * 7900);
        }
      });
    },
    changeData() {
      let updatedData = Object.assign({}, this.chartData);
      updatedData.datasets.forEach(dataset => {
        dataset.data = this.randomize(dataset.data);
      });
      this.chartData = updatedData;
    },
    next() {
      if (this.active + 1 < this.music.length) {
        this.active++;
      } else {
        this.active = 0;
      }
      if (this.play) {
        this.$refs.music.pause();
        setTimeout(() => {
          this.$refs.music.play();
        }, 100);
      }
      this.changeData();
    },
    previous() {
      if (this.active - 1 < 0) {
        this.active = this.music.length - 1;
      } else {
        this.active--;
      }
      if (this.play) {
        this.$refs.music.pause();
        setTimeout(() => {
          this.$refs.music.play();
        }, 100);
      }
      this.changeData();
    },
    togglePlay() {
      this.play = !this.play;
      this.changeData();
      if (this.play) {
        this.$refs.music.play();
        this.beat = setInterval(this.changeData, 1000);
      } else {
        this.$refs.music.pause();
        window.clearInterval(this.beat);
      }
    },
    setData() {
      this.chartData.labels = new Array(70).fill("");
      this.chartData.datasets.find(el => el).data = new Array(70).fill(0);
    }
  },
  beforeMount() {
    this.setData();
    this.changeData();
  }
};

Console errors: 0