diff --git a/src/components/YtbPlayer.vue b/src/components/YtbPlayer.vue index f0dd2e7..08883db 100644 --- a/src/components/YtbPlayer.vue +++ b/src/components/YtbPlayer.vue @@ -2,8 +2,11 @@
- + + + +
@@ -26,35 +29,50 @@ export default { displayYoutube: true, livesId: [], easterEggs: [], - easterEggsSongsId:-1, - songId: 0 + easterEggsSongsId: -1, + songId: 0, + muted: true } }, methods: { - readFileAndStore() - { + readFileAndStore() { let lofi = require("../data/lofi.json"); this.livesId = lofi.id; this.easterEggs = lofi.easterEggs; }, - nextPlaylist() - { + nextPlaylist() { this.songId++ === this.livesId.length - 1 ? this.songId = 0 : this.songId; let id = this.livesId[this.songId]; - this.changeYtbSrc(id) + this.loadVideoFromApi(id) }, - prevPlaylist() - { - --this.songId === -1 ? this.songId = this.livesId.length - 1: this.songId; + prevPlaylist() { + --this.songId === -1 ? this.songId = this.livesId.length - 1 : this.songId; let id = this.livesId[this.songId]; - this.changeYtbSrc(id) + this.loadVideoFromApi(id) + }, + pausePlayPlaylist() { + if (player.getPlayerState() === 1) { + player.pauseVideo(); + } else { + player.playVideo(); + } }, easterEgg() { this.easterEggsSongsId++ === this.easterEggs.length - 1 ? this.easterEggsSongsId = 0 : this.easterEggsSongsId; let id = this.easterEggs[this.easterEggsSongsId]; - this.changeYtbSrc(id) + this.loadVideoFromApi(id) }, - changeYtbSrc(id) { + setMuteState() { + if (this.muted) { + player.unMute(); + player.setVolume(15); + } else { + player.mute(); + } + + this.muted = !this.muted; + }, + loadVideoFromApi(id) { player.loadVideoById(id); }, loadApi() { @@ -64,13 +82,16 @@ export default { videoId: "XDh0JcxrbPM", playerVars: { 'autoplay': 1, - 'mute': 1 + 'mute': 1, + 'rel': 0, + 'showInfo': 0 }, events: { onStateChange: window.onPlayerStateChange } }); - document.getElementById("player").style.width = "100%"; + let player_id = document.getElementById("player") + player_id.style.width = "100%"; }; window.onPlayerStateChange = (event) => {