Finished videos

This commit is contained in:
Patrick Hatsune 2024-06-06 19:06:27 -07:00
parent eb487dea0a
commit 9f0acf9764
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
5 changed files with 124 additions and 22 deletions

View file

@ -19,6 +19,7 @@ export default {
:root { :root {
--bg-color: #192236; --bg-color: #192236;
--bg-alt-color: #151d2f; --bg-alt-color: #151d2f;
--bg-alt-hover-color: #111726;
--fg-color: #fff; --fg-color: #fff;
--padding: 20px; --padding: 20px;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

View file

@ -1,7 +1,9 @@
export default [ export default [
{ {
"videoName": "JP Installing Windows Project", "videoName": "JP Installing Windows Project",
"videoDescription": "This is a guide in japanese where I teach you how to install windows completely. This was made because of a JP Project I had to do.",
"videoID": "1", "videoID": "1",
"path": "videos/JP-Installing-Windows-Project.mp4" "path": "videos/JP-Installing-Windows-Project.mp4",
"thumbnail": "video_thumbnails/JP-Installing-Windows-Project.png"
} }
] ]

View file

@ -1,16 +1,95 @@
<template> <template>
<h1>This page is under construction</h1> <h1>Videos</h1>
<ul>
<router-link v-for="video in videos" :key="video.videoID" :to="'/videos/' + video.videoID">
<li>
<img :src="require('@/assets/' + video.thumbnail)" alt="Video Thumbnail"/>
<div id="content">
<h2>{{ video.videoName }}</h2>
</div>
</li>
</router-link>
</ul>
</template> </template>
<script>
import videoData from '../data/videos.js'
export default {
data () {
return {
videos: videoData
}
}
}
</script>
<style scoped> <style scoped>
h1 { h1 {
color: white; color: white;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
font-weight: 500; font-weight: 500;
font-size: 4rem; font-size: 3rem;
margin: 60px auto; margin-top: 20px;
}
a {
max-width: fit-content;
}
ul {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
row-gap: 32px;
li {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background-color: var(--bg-alt-color);
padding: 10px;
border-radius: 10px;
width: 370px;
cursor: pointer;
transition: 0.3s background-color;
h2 {
color: white;
font-family: 'Rubik', sans-serif;
font-weight: 500;
font-size: 1.5rem;
text-align: center; text-align: center;
} }
}
li:hover {
background-color: var(--bg-alt-hover-color);
}
img {
max-width: 350px;
aspect-ratio: 16 / 9;
pointer-events: none;
user-select: none;
}
}
@media only screen and (max-width: 779px) {
a {
max-width: 100%;
}
ul {
display: flex;
flex-direction: column;
li {
width: 100%;
}
}
}
</style> </style>

View file

@ -1,49 +1,69 @@
<template> <template>
<template v-if="notFound"> <notfound v-if="!(video)"></notfound>
<div class="notFound">
<h1>404 Page</h1>
<p>This page has not been found, <router-link to="/">click here</router-link> to return back home.</p>
</div>
</template>
<template v-else> <template v-else>
<h1>{{ video.videoName }}</h1>
<video controls> <video controls>
<source :src="require('@/assets/' + video.path)" type="video/mp4"> <source :src="require('@/assets/' + video.path)" type="video/mp4">
</video> </video>
<div id="info">
<h1>{{ video.videoName }}</h1>
<p>{{ video.videoDescription }}</p>
</div>
</template> </template>
</template> </template>
<script> <script>
import videoData from '../data/videos.js' import videoData from '../data/videos.js'
import notfound from '../views/404Page.vue'
export default { export default {
components: {
notfound
},
data () { data () {
return { return {
video: null, video: null
notFound: false
} }
}, },
created() { created() {
let videoID = this.$route.params.id; let videoID = this.$route.params.id;
this.video = videoData.find(v => v.videoID === videoID); this.video = videoData.find(v => v.videoID === videoID);
console.log(this.notFound);
} }
} }
</script> </script>
<style scoped> <style scoped>
h1 { video {
max-height: calc(100vh - 420px);
max-width: calc(100vw - 40px);
width: max-content;
aspect-ratio: 16 / 9;
margin-top: 20px;
}
#info {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 30px;
padding: 20px;
border-radius: 10px;
background-color: var(--bg-alt-color);
max-width: 600px;
}
#info h1 {
color: white; color: white;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
margin-top: 60px;
font-weight: 500; font-weight: 500;
font-size: 2rem; font-size: 2rem;
} }
video { #info p {
max-height: calc(100vh - 40px); font-family: 'Rubik', sans-serif;
max-width: calc(100vh - 40px); font-weight: 200;
aspect-ratio: 16 / 9; font-size: 1.3rem;
color: white;
} }
</style> </style>