Added option to using low played
Added Easter egg
This commit is contained in:
@@ -1,371 +1,410 @@
|
||||
<template>
|
||||
<footer>
|
||||
<div class="audioAndButtonsDiv">
|
||||
<div class="audioButtonsDiv">
|
||||
<button
|
||||
class="bigButton"
|
||||
:class="{ disabled: disableButtons }"
|
||||
:disabled="disableButtons"
|
||||
@click="randomizeTrack()"
|
||||
>
|
||||
<p v-if="!disableButtons"><u>R</u>andomize new track</p>
|
||||
<p v-else>Loading...</p>
|
||||
</button>
|
||||
<button class="bigButton" @click="showAnswer()"><u>S</u>how answer</button>
|
||||
</div>
|
||||
<div class="audioDiv">
|
||||
<audio
|
||||
controls
|
||||
class="audioPlayer"
|
||||
:src="currentTrackSrcFile"
|
||||
ref="audioPlayer"
|
||||
:onended="trackHasEnded"
|
||||
></audio>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<footer>
|
||||
<div class="audioAndButtonsDiv">
|
||||
<div class="audioButtonsDiv">
|
||||
<button
|
||||
class="bigButton"
|
||||
:class="{ disabled: disableButtons }"
|
||||
:disabled="disableButtons"
|
||||
@click="randomizeTrack()"
|
||||
>
|
||||
<p v-if="!disableButtons"><u>R</u>andomize new track</p>
|
||||
<p v-else>Loading...</p>
|
||||
</button>
|
||||
<button class="bigButton" @click="showAnswer()"><u>S</u>how answer</button>
|
||||
</div>
|
||||
<div class="audioDiv">
|
||||
<audio
|
||||
controls
|
||||
class="audioPlayer"
|
||||
:src="currentTrackSrcFile"
|
||||
ref="audioPlayer"
|
||||
:onended="trackHasEnded"
|
||||
></audio>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
import arne from "../../arne.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTrackSrcFile: "",
|
||||
disableButtons: false,
|
||||
loadingBar: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
"stopAfterCurrent",
|
||||
"localPlaylist",
|
||||
"hideNextTrack",
|
||||
"roundStarted",
|
||||
"specialTrackIsPlaying",
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
async randomizeTrack() {
|
||||
console.log("Randomizing track");
|
||||
/* Prevents anyone from changing the winning score after the round has started */
|
||||
if (this.roundStarted === false) {
|
||||
this.$store.dispatch("setRoundStarted", true);
|
||||
}
|
||||
let trackAddedToQue = false;
|
||||
this.disableButtons = true;
|
||||
let copyOfPlaylist = this.localPlaylist;
|
||||
//If the local playlist of MP3s is empty, wait for a new track to load
|
||||
if (copyOfPlaylist.length === 0) {
|
||||
console.log("No track preloaded, loading a new one");
|
||||
await this.APIgetRandomizedTrack();
|
||||
await this.APIaddToQue();
|
||||
trackAddedToQue = true;
|
||||
}
|
||||
//Update the source file for the media player (binded property to Audio tag in the template)
|
||||
this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
|
||||
/* this.$nextTick(() => {}); */
|
||||
if (!trackAddedToQue) {
|
||||
await this.APIaddToQue();
|
||||
}
|
||||
await this.APIgetPlaylistHistory();
|
||||
data() {
|
||||
return {
|
||||
currentTrackSrcFile: "",
|
||||
disableButtons: false,
|
||||
loadingBar: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
"stopAfterCurrent",
|
||||
"localPlaylist",
|
||||
"hideNextTrack",
|
||||
"roundStarted",
|
||||
"specialTrackIsPlaying",
|
||||
"lowPlayed",
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
async randomizeTrack() {
|
||||
console.log("Randomizing track");
|
||||
/* Prevents anyone from changing the winning score after the round has started */
|
||||
if (this.roundStarted === false) {
|
||||
this.$store.dispatch("setRoundStarted", true);
|
||||
}
|
||||
let trackAddedToQue = false;
|
||||
this.disableButtons = true;
|
||||
let copyOfPlaylist = this.localPlaylist;
|
||||
//If the local playlist of MP3s is empty, wait for a new track to load
|
||||
if (copyOfPlaylist.length === 0) {
|
||||
console.log("No track preloaded, loading a new one");
|
||||
if (this.lowPlayed) {
|
||||
await this.APIgetRandomizedLowTrack();
|
||||
} else {
|
||||
await this.APIgetRandomizedTrack();
|
||||
}
|
||||
await this.APIaddToQue();
|
||||
trackAddedToQue = true;
|
||||
}
|
||||
//Update the source file for the media player (binded property to Audio tag in the template)
|
||||
this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
|
||||
/* this.$nextTick(() => {}); */
|
||||
if (!trackAddedToQue) {
|
||||
await this.APIaddToQue();
|
||||
}
|
||||
await this.APIgetPlaylistHistory();
|
||||
|
||||
this.$refs.audioPlayer.play();
|
||||
this.$emit("scroll-to-bottom-playlist-history");
|
||||
copyOfPlaylist.shift();
|
||||
if (this.hideNextTrack) {
|
||||
this.$store.dispatch("setCurrentTrackHidden", true);
|
||||
} else {
|
||||
this.$refs.audioPlayer.play();
|
||||
this.$emit("scroll-to-bottom-playlist-history");
|
||||
copyOfPlaylist.shift();
|
||||
if (this.hideNextTrack) {
|
||||
this.$store.dispatch("setCurrentTrackHidden", true);
|
||||
} else {
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
}
|
||||
await this.APIgetInfoAboutCurrentTrack();
|
||||
await this.randomizeTrackInAdvance();
|
||||
this.disableButtons = false;
|
||||
},
|
||||
async randomizeTrackInAdvance() {
|
||||
console.log("Randomizing track in advance");
|
||||
try {
|
||||
if (this.lowPlayed) {
|
||||
await this.APIgetRandomizedLowTrack();
|
||||
} else {
|
||||
await this.APIgetRandomizedTrack();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log("Error: A track couldn't be loaded in advance");
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
async playSpecificTrack(track) {
|
||||
await this.APIplaySpecificTrack(track.SongNo);
|
||||
this.$store.dispatch("setCurrentlyLoadingTrack", "");
|
||||
await this.APIgetPlaylistHistory();
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
}
|
||||
await this.APIgetInfoAboutCurrentTrack();
|
||||
await this.randomizeTrackInAdvance();
|
||||
this.disableButtons = false;
|
||||
},
|
||||
async randomizeTrackInAdvance() {
|
||||
console.log("Randomizing track in advance");
|
||||
try {
|
||||
await this.APIgetRandomizedTrack();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log("Error: A track couldn't be loaded in advance");
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
async playSpecificTrack(track) {
|
||||
await this.APIplaySpecificTrack(track.SongNo);
|
||||
this.$store.dispatch("setCurrentlyLoadingTrack", "");
|
||||
await this.APIgetPlaylistHistory();
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
await this.APIgetInfoAboutCurrentTrack();
|
||||
},
|
||||
showAnswer() {
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
},
|
||||
startSoundTest() {
|
||||
this.$refs.audioPlayer.pause();
|
||||
this.currentTrackSrcFile = "sounds/check.mp3";
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.currentTime = 0;
|
||||
this.$refs.audioPlayer.play();
|
||||
});
|
||||
},
|
||||
playWelcomeSound() {
|
||||
let randomNumber = Math.floor(Math.random() * 10);
|
||||
this.$refs.audioPlayer.pause();
|
||||
if (randomNumber == 0) {
|
||||
this.currentTrackSrcFile = "sounds/sound1.mp3";
|
||||
} else if (randomNumber < 5) {
|
||||
this.currentTrackSrcFile = "sounds/intro_short.mp3";
|
||||
} else {
|
||||
this.currentTrackSrcFile = "sounds/intro_long.mp3";
|
||||
}
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.currentTime = 0;
|
||||
this.$refs.audioPlayer.play();
|
||||
});
|
||||
},
|
||||
playWinningSound() {
|
||||
this.$refs.audioPlayer.pause();
|
||||
this.currentTrackSrcFile = "sounds/winning.mp3";
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.currentTime = 0;
|
||||
this.$refs.audioPlayer.play();
|
||||
});
|
||||
},
|
||||
APIgetRandomizedTrack() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/rand`,
|
||||
responseType: "blob",
|
||||
onDownloadProgress: (progressEvent) => {
|
||||
let percentCompleted = Math.round(
|
||||
(progressEvent.loaded * 100) / progressEvent.total
|
||||
);
|
||||
if (percentCompleted % 10 == 0) {
|
||||
//Debug for slow downloading
|
||||
//console.log(percentCompleted);
|
||||
}
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
||||
this.$store.dispatch("updateLocalPlaylist", mp3);
|
||||
this.$nextTick(() => {
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log("An error happened when fetching the track");
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIaddToQue() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/addQue`,
|
||||
})
|
||||
.then(() => {
|
||||
resolve(false);
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIgetInfoAboutCurrentTrack() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/info`,
|
||||
})
|
||||
.then((response) => {
|
||||
let gameInfoObject = {
|
||||
game: response.data.Game,
|
||||
track: response.data.Song.replace(".mp3", ""),
|
||||
songNo: response.data.SongNo,
|
||||
};
|
||||
this.$store.dispatch("setCurrentGame", gameInfoObject.game);
|
||||
this.$store.dispatch("setCurrentTrack", gameInfoObject.track);
|
||||
resolve(false);
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIgetPlaylistHistory() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/list`,
|
||||
})
|
||||
.then((response) => {
|
||||
let tracklistArray = response.data;
|
||||
this.$store.dispatch("updatePlaylistHistory", tracklistArray);
|
||||
resolve();
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIplaySpecificTrack(trackNumber) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music?song=${trackNumber}`,
|
||||
responseType: "blob",
|
||||
})
|
||||
.then((response) => {
|
||||
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
||||
this.currentTrackSrcFile = window.URL.createObjectURL(mp3);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.play();
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
trackHasEnded() {
|
||||
if (this.specialTrackIsPlaying) {
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", false);
|
||||
return 0;
|
||||
}
|
||||
if (!this.stopAfterCurrent) {
|
||||
this.randomizeTrack();
|
||||
}
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
await this.APIgetPlaylistHistory();
|
||||
},
|
||||
await this.APIgetInfoAboutCurrentTrack();
|
||||
},
|
||||
showAnswer() {
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
},
|
||||
startSoundTest() {
|
||||
this.$refs.audioPlayer.pause();
|
||||
this.currentTrackSrcFile = "sounds/check.mp3";
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.currentTime = 0;
|
||||
this.$refs.audioPlayer.play();
|
||||
});
|
||||
},
|
||||
playWelcomeSound() {
|
||||
let randomNumber = Math.floor(Math.random() * 10);
|
||||
this.$refs.audioPlayer.pause();
|
||||
if (randomNumber == 0) {
|
||||
this.currentTrackSrcFile = "sounds/sound1.mp3";
|
||||
} else if (randomNumber < 5) {
|
||||
this.currentTrackSrcFile = "sounds/intro_short.mp3";
|
||||
} else {
|
||||
this.currentTrackSrcFile = "sounds/intro_long.mp3";
|
||||
}
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.currentTime = 0;
|
||||
this.$refs.audioPlayer.play();
|
||||
});
|
||||
},
|
||||
playWinningSound() {
|
||||
this.$refs.audioPlayer.pause();
|
||||
this.currentTrackSrcFile = "sounds/winning.mp3";
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.currentTime = 0;
|
||||
this.$refs.audioPlayer.play();
|
||||
});
|
||||
},
|
||||
APIgetRandomizedTrack() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/rand`,
|
||||
responseType: "blob",
|
||||
onDownloadProgress: (progressEvent) => {
|
||||
let percentCompleted = Math.round(
|
||||
(progressEvent.loaded * 100) / progressEvent.total
|
||||
);
|
||||
if (percentCompleted % 10 == 0) {
|
||||
//Debug for slow downloading
|
||||
//console.log(percentCompleted);
|
||||
}
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
||||
this.$store.dispatch("updateLocalPlaylist", mp3);
|
||||
this.$nextTick(() => {
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log("An error happened when fetching the track");
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIgetRandomizedLowTrack() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/rand/low`,
|
||||
responseType: "blob",
|
||||
onDownloadProgress: (progressEvent) => {
|
||||
let percentCompleted = Math.round(
|
||||
(progressEvent.loaded * 100) / progressEvent.total
|
||||
);
|
||||
if (percentCompleted % 10 == 0) {
|
||||
//Debug for slow downloading
|
||||
//console.log(percentCompleted);
|
||||
}
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
||||
this.$store.dispatch("updateLocalPlaylist", mp3);
|
||||
this.$nextTick(() => {
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log("An error happened when fetching the track");
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIaddToQue() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/addQue`,
|
||||
})
|
||||
.then(() => {
|
||||
resolve(false);
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIgetInfoAboutCurrentTrack() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/info`,
|
||||
})
|
||||
.then((response) => {
|
||||
let gameInfoObject = {
|
||||
game: response.data.Game,
|
||||
track: response.data.Song.replace(".mp3", ""),
|
||||
songNo: response.data.SongNo,
|
||||
};
|
||||
this.$store.dispatch("setCurrentGame", gameInfoObject.game);
|
||||
this.$store.dispatch("setCurrentTrack", gameInfoObject.track);
|
||||
resolve(false);
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIgetPlaylistHistory() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/list`,
|
||||
})
|
||||
.then((response) => {
|
||||
let tracklistArray = response.data;
|
||||
this.$store.dispatch("updatePlaylistHistory", tracklistArray);
|
||||
resolve();
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIplaySpecificTrack(trackNumber) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music?song=${trackNumber}`,
|
||||
responseType: "blob",
|
||||
})
|
||||
.then((response) => {
|
||||
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
||||
this.currentTrackSrcFile = window.URL.createObjectURL(mp3);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.play();
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
trackHasEnded() {
|
||||
if (this.specialTrackIsPlaying) {
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", false);
|
||||
return 0;
|
||||
}
|
||||
if (!this.stopAfterCurrent) {
|
||||
this.randomizeTrack();
|
||||
}
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
await this.APIgetPlaylistHistory();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
footer {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.audioAndButtonsDiv {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 80vw;
|
||||
margin-right: 1vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 80vw;
|
||||
margin-right: 1vh;
|
||||
}
|
||||
.audioButtonsDiv {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: 100%;
|
||||
margin-bottom: 2vh;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: 100%;
|
||||
margin-bottom: 2vh;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.audioButtonsDiv button:nth-child(1) {
|
||||
margin-right: 3vw;
|
||||
width: 200px;
|
||||
margin-right: 3vw;
|
||||
width: 200px;
|
||||
}
|
||||
.audioButtonsDiv button:nth-child(2) {
|
||||
margin-right: 25vw;
|
||||
width: 220px;
|
||||
margin-right: 25vw;
|
||||
width: 220px;
|
||||
}
|
||||
.audioButtonsDiv .bigButton {
|
||||
height: 7vh;
|
||||
height: 7vh;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.audioDiv {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.audioDiv audio {
|
||||
width: 100%;
|
||||
font-size: 2rem;
|
||||
width: 100%;
|
||||
font-size: 2rem;
|
||||
}
|
||||
audio::-webkit-media-controls-panel {
|
||||
background-color: rgb(185, 185, 185);
|
||||
background-color: rgb(185, 185, 185);
|
||||
}
|
||||
audio::-webkit-media-controls-current-time-display {
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 4em;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 4em;
|
||||
}
|
||||
audio::-webkit-media-controls-time-remaining-display {
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 4em;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
footer {
|
||||
position: static;
|
||||
justify-content: center;
|
||||
}
|
||||
footer {
|
||||
position: static;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audioAndButtonsDiv {
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
.audioButtonsDiv {
|
||||
margin-bottom: 2vw;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.audioAndButtonsDiv {
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
.audioButtonsDiv {
|
||||
margin-bottom: 2vw;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.audioButtonsDiv button:nth-child(1) {
|
||||
margin: 0;
|
||||
width: 50vw;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.audioButtonsDiv button:nth-child(2) {
|
||||
margin: 0;
|
||||
width: 50vw;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.audioButtonsDiv .bigButton {
|
||||
height: 22vw;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.audioButtonsDiv button:nth-child(1) {
|
||||
margin: 0;
|
||||
width: 50vw;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.audioButtonsDiv button:nth-child(2) {
|
||||
margin: 0;
|
||||
width: 50vw;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.audioButtonsDiv .bigButton {
|
||||
height: 22vw;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.audioDiv {
|
||||
width: 100%;
|
||||
}
|
||||
.audioDiv audio {
|
||||
font-size: 1rem;
|
||||
}
|
||||
audio::-webkit-media-controls-panel {
|
||||
background-color: rgb(185, 185, 185);
|
||||
border-radius: 2px;
|
||||
}
|
||||
audio::-webkit-media-controls-current-time-display {
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 2em;
|
||||
}
|
||||
audio::-webkit-media-controls-time-remaining-display {
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 2em;
|
||||
}
|
||||
.audioDiv {
|
||||
width: 100%;
|
||||
}
|
||||
.audioDiv audio {
|
||||
font-size: 1rem;
|
||||
}
|
||||
audio::-webkit-media-controls-panel {
|
||||
background-color: rgb(185, 185, 185);
|
||||
border-radius: 2px;
|
||||
}
|
||||
audio::-webkit-media-controls-current-time-display {
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 2em;
|
||||
}
|
||||
audio::-webkit-media-controls-time-remaining-display {
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user