mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Player?
This commit is contained in:
Kasper Rynning-Tønnesen
42
frontend/components/player/Player.vue
Normal file
42
frontend/components/player/Player.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="conatiner">
|
||||
<h1>Player</h1>
|
||||
<YouTube
|
||||
@end="end('youtube')"
|
||||
@pause="pause('youtube')"
|
||||
@play="play('youtube')"
|
||||
@buffering="buffering('youtube')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
import YouTube from "@/components/player/YouTube";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YouTube,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
done: false,
|
||||
player: undefined
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
play: function(source) {},
|
||||
pause: function(source) {},
|
||||
end: function(source) {},
|
||||
buffering: function(source) {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
3
frontend/components/player/SoundCloud.vue
Normal file
3
frontend/components/player/SoundCloud.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
166
frontend/components/player/YouTube.vue
Normal file
166
frontend/components/player/YouTube.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div id="youtubePlayer"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initialLoad: true,
|
||||
player: null,
|
||||
playerReady: false,
|
||||
currentPlaying: {},
|
||||
currentIsThis: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
nowPlaying: {
|
||||
get: function() {
|
||||
return store.getters["playerModule/nowPlaying"];
|
||||
}
|
||||
},
|
||||
playerState: {
|
||||
get: function() {
|
||||
if (!this.currentIsThis) {
|
||||
return this.PLAYER_STATES.PAUSED;
|
||||
}
|
||||
return store.getters["playerModule/playerState"];
|
||||
},
|
||||
set: function(state) {
|
||||
if (!this.currentIsThis) {
|
||||
return;
|
||||
}
|
||||
store.dispatch("playerModule/setPlayerState");
|
||||
}
|
||||
},
|
||||
PLAYER_STATES: function() {
|
||||
return store.getters["playerModule/PLAYER_STATES"];
|
||||
},
|
||||
channelSettings: function() {
|
||||
return store.getters["playerModule/channelSettings"];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
nowPlaying: function(nowPlaying) {
|
||||
this.currentIsThis = false;
|
||||
if (nowPlaying.source != "youtube") {
|
||||
return;
|
||||
}
|
||||
if (!this.playerReady) {
|
||||
return;
|
||||
}
|
||||
this.currentIsThis = true;
|
||||
|
||||
if (this.player == null) {
|
||||
this.createYoutubeObjectWithId(this.nowPlaying.id);
|
||||
} else {
|
||||
if (this.currentPlaying.id != nowPlaying.id) {
|
||||
try {
|
||||
this.player.loadVideoById(nowPlaying.id, {
|
||||
start: nowPlaying.seek,
|
||||
end: nowPlaying.end
|
||||
});
|
||||
} catch (e) {}
|
||||
} else {
|
||||
this.player.seekTo(nowPlaying.seek);
|
||||
}
|
||||
this.currentPlaying = nowPlaying;
|
||||
}
|
||||
},
|
||||
playerState: function(state) {
|
||||
if (!this.currentIsThis) {
|
||||
return;
|
||||
}
|
||||
if (state === this.PLAYER_STATES.PLAYING) {
|
||||
this.player.playVideo();
|
||||
} else if (state === this.PLAYER_STATES.PAUSED) {
|
||||
this.player.pauseVideo();
|
||||
} else if (state === this.PLAYER_STATES.ENDED) {
|
||||
this.player.stopVideo();
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.loadYoutubeIframe();
|
||||
},
|
||||
methods: {
|
||||
loadYoutubeIframe() {
|
||||
window.onYouTubeIframeAPIReady = this.onYouTubeIframeAPIReady;
|
||||
const tag = document.createElement("script");
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
const firstScriptTag = document.getElementsByTagName("script")[0];
|
||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
},
|
||||
onYouTubeIframeAPIReady() {
|
||||
this.playerReady = true;
|
||||
if (
|
||||
this.nowPlaying != undefined &&
|
||||
this.nowPlaying.id != undefined &&
|
||||
this.player == null
|
||||
) {
|
||||
this.createYoutubeObjectWithId(this.nowPlaying.id);
|
||||
}
|
||||
},
|
||||
createYoutubeObjectWithId(id) {
|
||||
if (this.player == null) {
|
||||
this.player = new YT.Player("youtubePlayer", {
|
||||
videoId: id,
|
||||
playerVars: {
|
||||
rel: "0",
|
||||
autoplay: 1,
|
||||
wmode: "transparent",
|
||||
controls: "0",
|
||||
fs: "0",
|
||||
iv_load_policy: "3",
|
||||
theme: "light",
|
||||
color: "white",
|
||||
showinfo: 0
|
||||
},
|
||||
events: {
|
||||
onReady: this.onPlayerReady,
|
||||
onStateChange: this.onPlayerStateChange,
|
||||
onError: this.errorHandler
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onPlayerReady(event) {
|
||||
console.log("event from onPlayerReady", event);
|
||||
event.target.playVideo();
|
||||
},
|
||||
checkForInitialLoadAndSeek() {
|
||||
if (!this.initialLoad) {
|
||||
return;
|
||||
}
|
||||
this.initialLoad = false;
|
||||
this.player.seekTo(this.nowPlaying.seek);
|
||||
},
|
||||
onPlayerStateChange(event) {
|
||||
console.log("event change", event);
|
||||
if (event.data === this.PLAYER_STATES.PLAYING) {
|
||||
console.log("playing");
|
||||
this.checkForInitialLoadAndSeek();
|
||||
} else if (event.data === this.PLAYER_STATES.ENDED) {
|
||||
console.log("ended");
|
||||
this.$root.$options.methods.songEnd();
|
||||
} else if (event.data === this.PLAYER_STATES.UNSTARTED) {
|
||||
console.log("not started");
|
||||
} else if (event.data === this.PLAYER_STATES.BUFFERING) {
|
||||
console.log("buffering");
|
||||
}
|
||||
},
|
||||
errorHandler(error) {
|
||||
console.log("error handling youtube player. Error:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#player {
|
||||
width: 100vw !important;
|
||||
height: 60vh;
|
||||
}
|
||||
</style>
|
||||
81
frontend/mixins/Socket.js
Normal file
81
frontend/mixins/Socket.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import store from "@/store";
|
||||
import io from "socket.io-client";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
socket: null,
|
||||
alreadyCreated: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.alreadyCreated) {
|
||||
console.log("we already exist");
|
||||
return;
|
||||
}
|
||||
this.socket = io("localhost:8080");
|
||||
console.log("mounted");
|
||||
this.addListeners();
|
||||
this.alreadyCreated = true;
|
||||
},
|
||||
computed: {
|
||||
nowPlaying: function() {
|
||||
return store.getters["playerModule/nowPlaying"];
|
||||
},
|
||||
channel: function() {
|
||||
return store.getters["playerModule/channel"];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitToBackend(event, msg) {
|
||||
this.socket.emit(event, msg);
|
||||
},
|
||||
songEnd() {
|
||||
this.socket.emit("end", { id: this.nowPlaying, channel: this.channel });
|
||||
},
|
||||
getPosition() {
|
||||
this.socket.emit("pos", { channel: this.channel });
|
||||
},
|
||||
addListeners() {
|
||||
this.socket.on("channel", msg => {
|
||||
console.log("list", msg);
|
||||
if (msg.type == "list") {
|
||||
store.dispatch("playerModule/setPlaylist", msg.playlist);
|
||||
}
|
||||
});
|
||||
|
||||
this.socket.on("conf", msg => {
|
||||
console.log("conf", msg);
|
||||
if (msg.length == 1) {
|
||||
store.dispatch("playerModule/setChannelSettings", msg[0]);
|
||||
}
|
||||
});
|
||||
this.socket.on("np", msg => {
|
||||
if (msg.np.length == 0) {
|
||||
return;
|
||||
}
|
||||
if (msg.conf.length == 0) {
|
||||
return;
|
||||
}
|
||||
let nowPlaying = msg.np[0];
|
||||
let channelSettings = msg.conf[0];
|
||||
let timeSinceStart =
|
||||
msg.time - channelSettings.startTime + nowPlaying.start;
|
||||
nowPlaying.seek = timeSinceStart;
|
||||
|
||||
store.dispatch("playerModule/setNowPlaying", nowPlaying);
|
||||
store.dispatch("playerModule/setChannelSettings", channelSettings);
|
||||
});
|
||||
|
||||
this.socket.on("update_required", msg => {
|
||||
console.log("update required");
|
||||
});
|
||||
this.socket.on("connect", msg => {
|
||||
this.socket.emit("list", {
|
||||
version: 6,
|
||||
channel: this.channel
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user