Added option to using low played
Added Easter egg
This commit is contained in:
@@ -1,171 +1,190 @@
|
||||
<template>
|
||||
<!-- Round Settings, Stop after current, Don't hide title -->
|
||||
<transition name="modalAni">
|
||||
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
||||
<div class="modalContainer">
|
||||
<div class="modalWrapper">
|
||||
<img
|
||||
class="closeModalImg"
|
||||
src="cancel-black-36dp.svg"
|
||||
alt="closeModalIMG"
|
||||
@click="closeModal"
|
||||
/>
|
||||
<h1>Settings</h1>
|
||||
<!-- Round Settings, Stop after current, Don't hide title -->
|
||||
<transition name="modalAni">
|
||||
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
||||
<div class="modalContainer">
|
||||
<div class="modalWrapper">
|
||||
<img
|
||||
class="closeModalImg"
|
||||
src="cancel-black-36dp.svg"
|
||||
alt="closeModalIMG"
|
||||
@click="closeModal"
|
||||
/>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="stopAfterCurrent"
|
||||
id="stopAfterCurrent"
|
||||
v-model="checkboxStopAfterCurrent"
|
||||
@change="updateOptionStopAfterCurrent"
|
||||
/>
|
||||
<label for="stopAfterCurrent">Stop after current</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="hideTitle"
|
||||
id="hideTitle"
|
||||
v-model="checkboxHideTitle"
|
||||
@change="updateOptionHideTitle"
|
||||
/>
|
||||
<label for="hideTitle">Hide next track</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="stopAfterCurrent"
|
||||
id="stopAfterCurrent"
|
||||
v-model="checkboxStopAfterCurrent"
|
||||
@change="updateOptionStopAfterCurrent"
|
||||
/>
|
||||
<label for="stopAfterCurrent">Stop after current</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="hideTitle"
|
||||
id="hideTitle"
|
||||
v-model="checkboxHideTitle"
|
||||
@change="updateOptionHideTitle"
|
||||
/>
|
||||
<label for="hideTitle">Hide next track</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="lowPlayed"
|
||||
id="lowPlayed"
|
||||
v-model="checkboxLowPlayed"
|
||||
@change="updateOptionLowPlayed"
|
||||
/>
|
||||
<label for="lowPlayed">Use low played mode</label>
|
||||
</div>
|
||||
|
||||
<div class="winningScoreDiv">
|
||||
<span>Winning Score: {{ winningScore }}</span>
|
||||
<button
|
||||
:class="{ disabled: roundStarted }"
|
||||
:disabled="roundStarted"
|
||||
@click="changeScore(-1)"
|
||||
>
|
||||
-1
|
||||
</button>
|
||||
<button
|
||||
:class="{ disabled: roundStarted }"
|
||||
:disabled="roundStarted"
|
||||
@click="changeScore(1)"
|
||||
>
|
||||
+1
|
||||
</button>
|
||||
</div>
|
||||
<div class="winningScoreDiv">
|
||||
<span>Winning Score: {{ winningScore }}</span>
|
||||
<button
|
||||
:class="{ disabled: roundStarted }"
|
||||
:disabled="roundStarted"
|
||||
@click="changeScore(-1)"
|
||||
>
|
||||
-1
|
||||
</button>
|
||||
<button
|
||||
:class="{ disabled: roundStarted }"
|
||||
:disabled="roundStarted"
|
||||
@click="changeScore(1)"
|
||||
>
|
||||
+1
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
checkboxStopAfterCurrent: false,
|
||||
checkboxHideTitle: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack"]),
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.show = false;
|
||||
},
|
||||
openModal() {
|
||||
this.show = true;
|
||||
},
|
||||
checkIfClickShouldCloseModal(event) {
|
||||
if (event.target.classList[0] === "modal") {
|
||||
this.closeModal();
|
||||
}
|
||||
},
|
||||
updateOptionHideTitle() {
|
||||
if (this.checkboxHideTitle) {
|
||||
this.$store.dispatch("updateHideNextTitle", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateHideNextTitle", false);
|
||||
}
|
||||
},
|
||||
updateOptionStopAfterCurrent() {
|
||||
if (this.checkboxStopAfterCurrent) {
|
||||
this.$store.dispatch("updateStopAfterCurrent", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateStopAfterCurrent", false);
|
||||
}
|
||||
},
|
||||
changeScore(score) {
|
||||
if (score < 0) {
|
||||
this.$store.dispatch("setWinningScore", -1);
|
||||
} else {
|
||||
this.$store.dispatch("setWinningScore", 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.checkboxStopAfterCurrent = this.stopAfterCurrent;
|
||||
this.checkboxHideTitle = this.hideNextTrack;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
checkboxStopAfterCurrent: false,
|
||||
checkboxHideTitle: false,
|
||||
checkboxLowPlayed: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "lowPlayed"]),
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.show = false;
|
||||
},
|
||||
openModal() {
|
||||
this.show = true;
|
||||
},
|
||||
checkIfClickShouldCloseModal(event) {
|
||||
if (event.target.classList[0] === "modal") {
|
||||
this.closeModal();
|
||||
}
|
||||
},
|
||||
updateOptionHideTitle() {
|
||||
if (this.checkboxHideTitle) {
|
||||
this.$store.dispatch("updateHideNextTitle", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateHideNextTitle", false);
|
||||
}
|
||||
},
|
||||
updateOptionLowPlayed() {
|
||||
if (this.checkboxLowPlayed) {
|
||||
this.$store.dispatch("updateLowPlayed", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateLowPlayed", false);
|
||||
}
|
||||
},
|
||||
updateOptionStopAfterCurrent() {
|
||||
if (this.checkboxStopAfterCurrent) {
|
||||
this.$store.dispatch("updateStopAfterCurrent", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateStopAfterCurrent", false);
|
||||
}
|
||||
},
|
||||
changeScore(score) {
|
||||
if (score < 0) {
|
||||
this.$store.dispatch("setWinningScore", -1);
|
||||
} else {
|
||||
this.$store.dispatch("setWinningScore", 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.checkboxStopAfterCurrent = this.stopAfterCurrent;
|
||||
this.checkboxHideTitle = this.hideNextTrack;
|
||||
this.checkboxLowPlayed = this.lowPlayed;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.winningScoreDiv {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.checkboxDiv {
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
.checkboxDiv:first-of-type {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.checkboxDiv input {
|
||||
transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.checkboxDiv label {
|
||||
margin-left: 10px;
|
||||
font-size: 1.5rem;
|
||||
margin-left: 10px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.winningScoreDiv span {
|
||||
font-size: 1.7rem;
|
||||
margin-right: 10px;
|
||||
width: 245px;
|
||||
font-size: 1.7rem;
|
||||
margin-right: 10px;
|
||||
width: 245px;
|
||||
}
|
||||
.winningScoreDiv button {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 33px;
|
||||
background: rgb(16, 99, 194);
|
||||
color: rgb(235, 235, 235);
|
||||
border-color: rgb(161, 161, 161);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 3px;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 33px;
|
||||
background: rgb(16, 99, 194);
|
||||
color: rgb(235, 235, 235);
|
||||
border-color: rgb(161, 161, 161);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 50%;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.checkboxDiv label {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.checkboxDiv label {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.winningScoreDiv span {
|
||||
font-size: 1.3rem;
|
||||
margin-right: 10px;
|
||||
width: 245px;
|
||||
}
|
||||
.winningScoreDiv span {
|
||||
font-size: 1.3rem;
|
||||
margin-right: 10px;
|
||||
width: 245px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,43 +1,50 @@
|
||||
<template>
|
||||
<transition name="modalAni">
|
||||
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
||||
<div class="modalContainer">
|
||||
<div class="modalWrapper">
|
||||
<img
|
||||
class="closeModalImg"
|
||||
src="cancel-black-36dp.svg"
|
||||
alt="closeModalIMG"
|
||||
@click="closeModal"
|
||||
/>
|
||||
<h1>{{ playerName }} won!!</h1>
|
||||
<transition name="modalAni">
|
||||
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
||||
<div class="modalContainer">
|
||||
<div class="modalWrapper">
|
||||
<img
|
||||
class="closeModalImg"
|
||||
src="cancel-black-36dp.svg"
|
||||
alt="closeModalIMG"
|
||||
@click="closeModal"
|
||||
/>
|
||||
<h1 v-if="showPeter()">Pete... I mean {{ playerName }} won!!</h1>
|
||||
<h1 v-else>{{ playerName }} won!!</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
playerName: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.show = false;
|
||||
},
|
||||
openModal(playerName) {
|
||||
this.playerName = playerName;
|
||||
this.show = true;
|
||||
},
|
||||
checkIfClickShouldCloseModal(event) {
|
||||
if (event.target.classList[0] === "modal") {
|
||||
this.closeModal();
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
playerName: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.show = false;
|
||||
},
|
||||
showPeter() {
|
||||
let randomNumber = Math.floor(Math.random() * 10);
|
||||
console.log(randomNumber);
|
||||
console.log("Test");
|
||||
return randomNumber < 2;
|
||||
},
|
||||
openModal(playerName) {
|
||||
this.playerName = playerName;
|
||||
this.show = true;
|
||||
},
|
||||
checkIfClickShouldCloseModal(event) {
|
||||
if (event.target.classList[0] === "modal") {
|
||||
this.closeModal();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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