Skip to content

Commit

Permalink
feature(player) update video player css
Browse files Browse the repository at this point in the history
  • Loading branch information
@rohrig
rohrig committed Oct 28, 2022
1 parent 24e3f04 commit 1a4c596
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 39 deletions.
80 changes: 42 additions & 38 deletions pages/topics/[name].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ const setColorTheme = (newTheme: Theme) => {
useColorMode().preference = newTheme
}
const route = useRoute()
type topicData = {
Expand All @@ -24,7 +23,7 @@ const { data, pending } = await useFetch<topicData>(`/api/topic/${topicName}`, {
const videoPlaceholderElement = ref(null)
const videoWrapper = ref(null)
const activeVideo = ref(data.value.videos[0])
const activeVideo = ref(data.value?.videos[0])
function setActive(video: Video) {
activeVideo.value = video
Expand All @@ -38,6 +37,10 @@ function setActive(video: Video) {
videoWrapper.value.innerHTML = htmlString;
}
function isActive(video: Video) {
return video.host_id == activeVideo.value.host_id
}
function createIframe(vidId: string) {
const url = 'https://www.youtube.com/embed/' + vidId + '?autoplay=1'
const htmlString = `<iframe class="mt-5 block object-cover object-center lg:rounded-lg w-full min-w-200 aspect-video mb-10 p-0" src="${url}" allowfullscreen allow="autoplay"></iframe>`
Expand All @@ -49,7 +52,7 @@ function createIframe(vidId: string) {

<template>

<div class="md:flex dark:bg-slate-900">
<div v-if="data" class="md:flex dark:bg-slate-900">
<aside class=" hidden md:block pl-10 pr-10 text-left h-screen w-1/4 dark:bg-slate-900">
<div class="text-gray-800 dark:text-gray-100 text-xl">
<div class="p-2.5 mt-1 flex items-center">
Expand All @@ -59,7 +62,7 @@ function createIframe(vidId: string) {
</NuxtLink>
</div>
<div>

<span class="hidden md:block " @click="setColorTheme($colorMode.preference == 'dark' ? 'light' : 'dark')">
<svg v-if="$colorMode.value == 'dark'" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-50 hidden lg:block" viewBox="0 0 20 20" fill="currentColor">
Expand All @@ -77,26 +80,29 @@ function createIframe(vidId: string) {
<div class="my-2 bg-gray-600 h-[1px]"></div>
</div>
<div>
<img class="h-16" :src="data.topic.image" v-if="data.topic.image !== '/img/nuxt3.svg'" alt="nuxt 3 logo">
<svg v-if="data.topic.image == '/img/nuxt3.svg'" viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-26 mr-5">
<g clip-path="url(#a)">
<path fill="currentColor"
d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z"
fill="#80EEC0"></path>
<path
d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z"
fill="#00DC82"></path>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h221v65H0z"></path>
</clipPath>
</defs>
</svg>
<img class="h-16" :src="data?.topic.image" v-if="data?.topic.image !== '/img/nuxt3.svg'" alt="nuxt 3 logo">
<svg v-if="data?.topic.image == '/img/nuxt3.svg'" viewBox="0 0 221 65" fill="none"
xmlns="http://www.w3.org/2000/svg" class="h-26 mr-5">
<g clip-path="url(#a)">
<path fill="currentColor"
d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z">
</path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z"
fill="#80EEC0"></path>
<path
d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z"
fill="#00DC82"></path>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h221v65H0z"></path>
</clipPath>
</defs>
</svg>
</div>
<div class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-green-600 text-white"
<div
class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-green-600 text-white"
onclick="dropdown()">
<i class="bi bi-chat-left-text-fill"></i>
<div class="flex justify-between w-full items-center">
Expand All @@ -106,34 +112,32 @@ function createIframe(vidId: string) {
</div>
</div>
<ul class="text-left mx-auto text-gray-800 dark:text-gray-200 font-bold">
<li class="cursor-pointer p-2 hover:bg-green-600 rounded-md mt-1" @click="setActive(video)"
v-for="video in data.videos">
<li class="cursor-pointer p-2 hover:bg-green-400 rounded-md mt-1" :class="{ 'bg-green-600': isActive(video) }"
@click="setActive(video)" v-for="video in data?.videos">
{{ video.title }}
</li>
</ul>
</aside>
<div class="w-screen pt-0 mt-0" v-if="!pending && data">
<section class="overflow-hidden text-gray-700">
<div class="container ">
<div class="clickable" @click="createIframe(activeVideo?.host_id)"
ref="videoWrapper">
<div ref="videoPlaceholderElement align-center justify-center">
<div class="video__youtube container flex" :id="activeVideo?.host_id">
<img :src="'https://i.ytimg.com/vi/' + activeVideo?.host_id + '/maxresdefault.jpg'"
class=""
alt="video thumbnail" />
</div>
<section class="overflow-hidden text-gray-700">
<div class="container ">
<div class="clickable" @click="createIframe(activeVideo?.host_id)" ref="videoWrapper">
<div ref="videoPlaceholderElement align-center justify-center">
<div class="video__youtube container flex" :id="activeVideo?.host_id">
<img :src="'https://i.ytimg.com/vi/' + activeVideo?.host_id + '/maxresdefault.jpg'" class=""
alt="video thumbnail" />
</div>
</div>
</div>
</section>
</div>
</section>
</div>
<div class="md:hidden">
<ul class="mx-auto text-left mx-auto text-gray-800 dark:text-gray-200 font-bold">
<li class="cursor-pointer p-2 hover:bg-green-600 rounded-md mt-1" @click="setActive(video)"
v-for="video in data.videos">
v-for="video in data?.videos">
{{ video.title }}
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion tests/registar.test.ts → tests/unit/register_validation.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { describe, expect, it, vi } from 'vitest'
import { validate } from '../server/services/validator'
import { validate } from '../../server/services/validator'


describe('test email validation', async () => {
Expand Down

0 comments on commit 1a4c596

Please sign in to comment.