<script>
import { defineComponent } from 'vue'
import Sidebar from '@/components/Sidebar.vue'
import Player from '@/components/Player.vue'
import VideoFeed from '@/components/VideoFeed.vue'
import axios from 'axios'
import { config } from '@/main'

export default defineComponent({
	name: 'HomeView',
	components: { VideoFeed, Player, Sidebar },
	created() {
		// Fetch feed data //
		axios
			.get(`${config.serverURL}/video/feed`, {
				withCredentials: true,
			})
			.then((response) => {
				if (response.data.error) return
				this.data = response.data
				console.log(this.data)
			})
			.catch((error) => {
				console.error('Error in getting feed!')
				console.error(error)
			})
	},
	data() {
		return {
			data: null,
		}
	},
})
</script>

<template>
	<div class="main">
		<Sidebar />
		<VideoFeed v-if="this.data" :feed="this.data" />
		<p v-else>loading</p>
	</div>
</template>

<style scoped>
.main {
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: row;
}
</style>
