Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chat and player ui #19

Merged
merged 1 commit into from
Aug 19, 2023
Merged

chat and player ui #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions assets/player.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions components/Cards/profile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface Props {
// defineProps<Props>()

withDefaults(defineProps<Props>(), {
name: 'Berke',
name: '',
avatar: '',
source: '',
viewers: '',
Expand All @@ -35,7 +35,7 @@ withDefaults(defineProps<Props>(), {
<span class="text-xs text-gray-500 font-bold">Recommended</span>
</div>
</div> -->
<UButton :ui="{ size: { custom: 'text-xs' }, gap: { custom: 'max-lg:gap-x-2 lg:gap-x-2.5' }, padding: { custom: 'max-lg:px-12 py-1.5 lg:px-4 py-2' } }" class="m-3 " size="custom" variant="solid">
<UButton :ui="{ size: { custom: 'text-xs' }, gap: { custom: 'max-lg:gap-x-2 lg:gap-x-2.5' }, padding: { custom: 'max-lg:px-12 py-1.5 lg:px-4 py-2' } }" class="m-3 backdrop-blur-sm " variant="secondary" size="custom">
Follow
</UButton>
</div>
Expand Down
3 changes: 2 additions & 1 deletion components/Cards/videos.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
interface Props {
name: string
avatar: string
feature: string
}
Expand All @@ -20,7 +21,7 @@ withDefaults(defineProps<Props>(), {
</div>
<div class="pb-5 px-2 pt-2.5">
<p class="text-[20px] font-bold">
Kuzey Işıkları
{{ name }}
</p>
<p class=" text-xs text-gray-400">
Avaible on <span class="text-white">Youtube</span>
Expand Down
39 changes: 39 additions & 0 deletions components/Room/ChatorPlayList/chat/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script setup lang="ts">
const timeAgo = useTimeAgo(new Date(2021, 0, 1))

</script>

<template>
<div class="flex flex-col justify-between h-[680px] ">
<div class="relative flex flex-col gap-10">
<div
:data-current-time="timeAgo" class=" relative flex text-sm items-center after:absolute after:right-5 after:bottom-[-20px] after:text-gray-500 after:text-xs after:content-[attr(data-current-time)]
w-fit gap-2 px-5 py-[15px] rounded-3xl bg-gray-700/80"
>
Lorem ipsum dolor sit amet.
</div>
<div class="flex justify-end">
<div
:data-current-time="timeAgo"
class=" relative flex text-sm items-center before:absolute before:left-5 before:bottom-[-20px] before:text-gray-500 before:text-xs before:content-[attr(data-current-time)] w-fit gap-2 px-5 py-[15px] rounded-3xl bg-purple-400/20"
>
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
<div>
<UInput variant="solid" placeholder="Write Something..." class="!px-12">
<template #leading>
<UButton class="!text-gray-600" variant="ghost" icon="i-ph-smiley" />
</template>
<template #trailing>
<UButton class="!text-gray-600" variant="ghost" icon="i-ph-paper-plane-tilt-fill" />
</template>
</UInput>
</div>
</div>
</template>

<style scoped>

</style>
19 changes: 19 additions & 0 deletions components/Room/ChatorPlayList/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script setup lang="ts">
const items = [{
label: 'Chat',
slot: 'Chat',
}, {
label: 'Play List',
content: 'Play List',
}]
</script>

<template>
<div class="px-4">
<UTabs class="h-full" :items="items">
<template #Chat>
<RoomChatorPlayListChat />
</template>
</UTabs>
</div>
</template>
14 changes: 14 additions & 0 deletions components/Room/Player/player.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script setup lang="ts">

</script>

<template>
<div>

<img class="h-[650px] " src="../../../assets/player.svg">
</div>
</template>

<style scoped>

</style>
4 changes: 2 additions & 2 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const data = [
<p class="text-md md:text-xl">
Recommended Lefiners
</p>
<UButton trailing variant="secondary" icon="i-ph-arrow-right">
<UButton to="/lefiners" trailing variant="secondary" icon="i-ph-arrow-right">
Daha Fazla
</UButton>
</div>
Expand All @@ -46,7 +46,7 @@ const data = [
<p class="text-md md:text-xl break-words tracking-wide">
Recommended Videos
</p>
<UButton trailing variant="secondary" icon="i-ph-arrow-right">
<UButton to="/videos" trailing variant="secondary" icon="i-ph-arrow-right">
Daha Fazla
</UButton>
</div>
Expand Down
42 changes: 42 additions & 0 deletions pages/lefiners/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<script setup lang="ts">
const data = [
{ firstName: 'Aylin Kaya' },
{ firstName: 'Emre Yılmaz' },
{ firstName: 'Elif Demir' },
{ firstName: 'Burak Şahin' },
{ firstName: 'Zeynep Avcı' },
{ firstName: 'Ahmet Çelik' },
{ firstName: 'Deniz Arslan' },
{ firstName: 'Esra Öztürk' },
{ firstName: 'Barış Karadağ' },
{ firstName: 'Gamze Kocaman' },
{ firstName: 'Can Yıldırım' },
{ firstName: 'İpek Taş' },
{ firstName: 'Mert Sönmez' },
{ firstName: 'Yasemin Özkan' },
{ firstName: 'Cem Şeker' },
{ firstName: 'Nazlı Akgün' },
{ firstName: 'Ali Tuna' },
{ firstName: 'Nil Kılıç' },
{ firstName: 'Kaan Eren' },
{ firstName: 'Melike Koç' },
]
</script>

<template>
<div class="page">
<div class="p-5">
<p class="md:text-xl">
Recommended Lefiners
</p>

<div class="py-7 grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
<CardsProfile v-for="(item, idx) in data" :key="idx" :name="item.firstName" />
</div>
</div>
</div>
</template>

<style scoped>

</style>
41 changes: 41 additions & 0 deletions pages/room/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<script setup>
const crateVideoModal = ref(false)
</script>

<template>
<div class="page h-full flex flex-col w-full">
<div class="flex justify-between w-full">
<div class="flex flex-col lg:flex-row items-center pb-4 gap-3">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="xl" />
<div class="flex flex-col items-center lg:items-start">
<span class="text-sm">Berke</span>
<span class="text-xs text-gray-500 font-bold">Recommended</span>
</div>
</div>
<div class="flex items-center justify-center gap-2 ">
<UAvatarGroup size="sm" :max="3">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
<UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
<UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
<UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
</UAvatarGroup>
<UButton @click="crateVideoModal = !crateVideoModal" class="!text-gray-600" :ui="{ size: { custom: 'text-4xl' } }" variant="ghost" size="custom" icon="i-ph-plus-circle" />
</div>
</div>
<div class="h-full flex w-full">
<div class="w-3/5">
<!-- Player kısmı %60 -->
<RoomPlayer />
</div>
<div class="w-2/5">
<!-- Chat kısmı %40 -->
<RoomChatorPlayList />
</div>
</div>
</div>
</template>

<style lang="scss" scoped>

</style>
42 changes: 42 additions & 0 deletions pages/videos/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<script setup lang="ts">
const data = [
{ firstName: 'Gülümsemenin İzinde' },
{ firstName: 'Macera Ruhunun Peşinde' },
{ firstName: 'Rüya Dolu Anılar' },
{ firstName: 'Şehir Keşiflerinde' },
{ firstName: 'Sanatla İç İçe' },
{ firstName: 'Lezzetli Maceralar' },
{ firstName: 'Doğanın Dansı' },
{ firstName: 'Yaratıcılığın Kanatlarında' },
{ firstName: 'Müziğin Ritmiyle' },
{ firstName: 'Renklerle Dolu Anlar' },
{ firstName: 'Spor Tutkusu' },
{ firstName: 'Keşiflerin Peşinde' },
{ firstName: 'Fotoğrafın Hikayesi' },
{ firstName: 'Lezzetli Durağında' },
{ firstName: 'Mizah Dolu Anlar' },
{ firstName: 'Kitapların Dünyası' },
{ firstName: 'Sokak Röportajları' },
{ firstName: 'Dansın Ritmiyle' },
{ firstName: 'Teknoloji Keşifleri' },
{ firstName: 'Müziğin Sesiyle' },
]
</script>

<template>
<div class="page">
<div class="p-5">
<p class="md:text-xl">
Recommended Videos
</p>

<div class="py-7 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<CardsVideos v-for="(item, idx) in data" :key="idx" :name="item.firstName" />
</div>
</div>
</div>
</template>

<style scoped>

</style>