etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-12-22 08:20:17 +00:00
Code Issues Projects Releases Wiki Activity

search & watch page YouKnowWho look

Browse source
This commit is contained in:
Nikita Krupin 2022-03-21 21:13:48 -04:00
parent 0fa979684a
commit 0c0dfc9efc
6 changed files with 45 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
NUXT/components/bottomNavigation.vue
View file

@ -58,6 +58,7 @@ export default {
z-index: 99999;
}
.navButton {
width: 25vw !important;
font-size: 0.66rem !important;
}
.tab {

4
NUXT/components/topNavigation.vue
View file

@ -84,8 +84,4 @@ export default {
.searchBar {
margin: 0;
}
.searchButton {
width: 100%;
justify-content: left !important;
}
</style>

17
NUXT/layouts/default.vue
View file

@ -42,15 +42,17 @@
>
<div class="scroll-y" style="height: 100%">
<div v-if="search" style="min-width: 180px">
<v-list-item v-for="(item, index) in response" :key="index">
<v-icon>mdi-magnify</v-icon>
<v-list-item v-for="(item, index) in response" :key="index" class="px-0">
<v-btn
text
tile
dense
class="info--text searchButton text-left text-capitalize"
@click="youtubeSearch(item)"
v-text="item[0]"
/>
>
<v-icon class="mr-5">mdi-magnify</v-icon>
{{ item[0] }}
</v-btn>
</v-list-item>
</div>
</div>
@ -88,6 +90,13 @@ div {
}
</style>
<style scoped>
.searchButton {
width: 100%;
justify-content: left !important;
}
</style>
<script>
import { App as CapacitorApp } from "@capacitor/app";
import { mapState } from "vuex";

31
NUXT/pages/search.vue
View file

@ -1,22 +1,22 @@
<template>
<div>
<center v-if="videos.length == 0">
<div class="accent">
<center v-if="videos.length == -1">
<v-skeleton-loader type="card-avatar, article, actions" />
<v-skeleton-loader type="card-avatar, article, actions" />
</center>
<v-list-item v-for="(video, index) in videos" :key="index">
<v-card class="entry" :to="`/watch?v=${video.id}`">
<v-card-text>
<div style="position: relative">
<v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
<div
class="videoRuntimeFloat"
style="color: #fff"
v-text="video.runtime"
/>
</div>
<div style="margin-top: 0.5em" v-text="video.title" />
<v-list-item v-for="(video, index) in videos" :key="index" class="pa-0">
<v-card class="entry background" :to="`/watch?v=${video.id}`" flat>
<div style="position: relative">
<v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
<div
class="videoRuntimeFloat"
style="color: #fff"
v-text="video.runtime"
/>
</div>
<div class="px-4 pt-4" v-text="video.title" />
<v-card-text class="pt-0">
<div v-text="`${video.views} • ${video.uploaded}`" />
</v-card-text>
</v-card>
@ -26,7 +26,6 @@
<style scoped>
.entry {
margin-top: 1em;
width: 100%; /* Prevent Loading Weirdness */
}
.videoRuntimeFloat {
@ -35,7 +34,7 @@
right: 10px;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 0 3px 0 3px;
padding: 0px 4px 0px 4px;
}
</style>

21
NUXT/pages/watch.vue
View file

@ -1,13 +1,13 @@
<template>
<div>
<video controls autoplay :src="vidSrc" width="100%" height="300vh" />
<v-card class="ml-2 mr-2 flat light" flat>
<v-card-title
style="padding-top: 0; padding-bottom: 0; font-size: 0.95em"
<video controls autoplay :src="vidSrc" width="100%" style="max-height: 50vh" />
<v-card class="ml-2 mr-2 background" flat>
<v-card-title class="mt-2"
style="padding-top: 0; padding-bottom: 0; font-size: 0.95rem; line-height: 1rem;"
v-text="title"
/>
<v-card-text>
<div style="margin-bottom: 1em">{{ views }} views • {{ uploaded }}</div>
<div style="margin-bottom: 1rem;">{{ views }} views • {{ uploaded }}</div>
<!-- Scrolling Div For Interactions --->
<div style="display: flex; margin-bottom: 1em">
@ -25,7 +25,7 @@
@click="item.action"
>
<v-icon v-text="item.icon" />
<div v-text="item.value || item.name" />
<div class="mt-2" style="font-size: .66rem;" v-text="item.value || item.name" />
</v-btn>
</v-list-item>
@ -36,9 +36,8 @@
</v-btn>
</div>
<!-- End Scrolling Div For Interactions --->
<hr />
<!-- <hr /> -->
<p>Channel Stuff</p>
<hr />
</v-card-text>
<div v-if="showMore" class="scroll-y ml-2 mr-2">
{{ description }}
@ -86,21 +85,21 @@ export default {
interactions: [
{
name: "Likes",
icon: "mdi-thumb-up",
icon: "mdi-thumb-up-outline",
action: null,
value: this.likes,
disabled: true,
},
{
name: "Dislikes",
icon: "mdi-thumb-down",
icon: "mdi-thumb-down-outline",
action: this.dislike(),
value: this.dislikes,
disabled: true,
},
{
name: "Share",
icon: "mdi-share",
icon: "mdi-share-outline",
action: this.share(),
disabled: true,
},

12
ios/App/Podfile
View file

@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true
def capacitor_pods
pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http'
pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
end
target 'App' do