mirror of
https://github.com/VueTubeApp/VueTube
synced 2025-01-05 15:11:13 +00:00
Merge pull request #239 from 404-Program-not-found/main
Display Channel info, Comments, fixed bug with descriptions.
This commit is contained in:
Kenny
GitHub
commit
ca8151f21d
23 changed files with 731 additions and 262 deletions
87
NUXT/components/Comments/commentMainRenderer.vue
Normal file
87
NUXT/components/Comments/commentMainRenderer.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div id="comment">
|
||||
<a
|
||||
:href="this.$rendererUtils.getNavigationEndpoints(comment.authorEndpoint)"
|
||||
class="avatar-link pt-2"
|
||||
>
|
||||
<v-img
|
||||
class="avatar-thumbnail"
|
||||
:src="
|
||||
comment.authorThumbnail.thumbnails[
|
||||
comment.authorThumbnail.thumbnails.length - 1
|
||||
].url
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
<v-card-text class="comment-info pt-2">
|
||||
<div
|
||||
v-for="title in comment.title.runs"
|
||||
:key="title.text"
|
||||
style="margin-top: 0.5em"
|
||||
class="vid-title"
|
||||
>
|
||||
{{ title.text }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="caption background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
v-text="parseBottom(comment)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.entry {
|
||||
width: 100%; /* Prevent Loading Weirdness */
|
||||
}
|
||||
|
||||
.vid-title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-thumbnail {
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#details {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.entry {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#details {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["comment"],
|
||||
|
||||
methods: {
|
||||
parseBottom(comment) {
|
||||
const bottomText = [
|
||||
comment.subscriberCountText?.runs[0].text,
|
||||
comment.videoCountText?.runs.map((run) => run.text).join(" "),
|
||||
];
|
||||
return bottomText.join(" · ");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
0
NUXT/components/Comments/commentThreadRenderer.vue
Normal file
0
NUXT/components/Comments/commentThreadRenderer.vue
Normal file
|
|
@ -32,7 +32,7 @@
|
|||
<a
|
||||
:href="
|
||||
this.$rendererUtils.getNavigationEndpoints(
|
||||
video.shortBylineText.runs[0].navigationEndpoint
|
||||
video.shortBylineText.runs[0]
|
||||
)
|
||||
"
|
||||
class="avatar-link pt-2"
|
||||
|
|
|
|||
|
|
@ -38,12 +38,14 @@
|
|||
import compactVideoRenderer from "~/components/CompactRenderers/compactVideoRenderer.vue";
|
||||
import compactChannelRenderer from "~/components/CompactRenderers/compactChannelRenderer.vue";
|
||||
import gridVideoRenderer from "~/components/gridRenderers/gridVideoRenderer.vue";
|
||||
import videoWithContextRenderer from "~/components/gridRenderers/videoWithContextRenderer.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
gridVideoRenderer,
|
||||
compactVideoRenderer,
|
||||
compactChannelRenderer,
|
||||
videoWithContextRenderer,
|
||||
},
|
||||
props: ["render"],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div class="description">
|
||||
<template v-for="(text, index) in render.description.runs">
|
||||
<template
|
||||
v-if="
|
||||
text.navigationEndpoint && text.navigationEndpoint.webviewEndpoint
|
||||
"
|
||||
>
|
||||
<div class="description" v-if="render.descriptionBodyText">
|
||||
<template v-for="(text, index) in render.descriptionBodyText.runs">
|
||||
<template v-if="$rendererUtils.checkInternal(text)">
|
||||
<a
|
||||
@click="openExternal($rendererUtils.getNavigationEndpoints(text))"
|
||||
@click="openInternal($rendererUtils.getNavigationEndpoints(text))"
|
||||
:key="index"
|
||||
>{{ text.text }}</a
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="$rendererUtils.checkInternal(text)">
|
||||
<template
|
||||
v-else-if="
|
||||
text.navigationEndpoint && text.navigationEndpoint.urlEndpoint
|
||||
"
|
||||
>
|
||||
<a
|
||||
@click="openInternal($rendererUtils.getNavigationEndpoints(text))"
|
||||
@click="openExternal($rendererUtils.getNavigationEndpoints(text))"
|
||||
:key="index"
|
||||
>{{ text.text }}</a
|
||||
>
|
||||
|
|
@ -27,7 +27,6 @@
|
|||
<style scoped>
|
||||
.description {
|
||||
white-space: pre-line;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
151
NUXT/components/gridRenderers/videoWithContextRenderer.vue
Normal file
151
NUXT/components/gridRenderers/videoWithContextRenderer.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<v-card
|
||||
class="entry videoWithContextRenderer background"
|
||||
:to="`/watch?v=${video.videoId}`"
|
||||
flat
|
||||
>
|
||||
<div style="position: relative" class="thumbnail-container">
|
||||
<v-img
|
||||
v-if="video.thumbnail"
|
||||
:aspect-ratio="16 / 9"
|
||||
:src="
|
||||
$youtube.getThumbnail(
|
||||
video.videoId,
|
||||
'max',
|
||||
video.thumbnail.thumbnails
|
||||
)
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-if="video.thumbnailOverlays"
|
||||
class="videoRuntimeFloat"
|
||||
:class="
|
||||
'style-' +
|
||||
video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
|
||||
"
|
||||
style="color: #fff"
|
||||
v-text="
|
||||
video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
|
||||
.runs[0].text
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div id="details">
|
||||
<a
|
||||
:href="
|
||||
$rendererUtils.getNavigationEndpoints(
|
||||
video.shortBylineText.runs[0].navigationEndpoint
|
||||
)
|
||||
"
|
||||
class="avatar-link pt-2"
|
||||
>
|
||||
<v-img
|
||||
class="avatar-thumbnail"
|
||||
:src="
|
||||
video.channelThumbnail.channelThumbnailWithLinkRenderer.thumbnail
|
||||
.thumbnails[0].url
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
<v-card-text class="video-info pt-2">
|
||||
<div
|
||||
v-for="title in video.headline.runs"
|
||||
:key="title.text"
|
||||
style="margin-top: 0.5em"
|
||||
class="font-weight-medium vid-title"
|
||||
>
|
||||
{{ title.text }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="background--text text--lighten-5 caption"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
v-text="parseBottom(video)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.entry {
|
||||
width: 100%; /* Prevent Loading Weirdness */
|
||||
}
|
||||
.videoRuntimeFloat {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 0px 4px 0px 4px;
|
||||
}
|
||||
|
||||
.videoRuntimeFloat.style-DEFAULT {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.videoRuntimeFloat.style-LIVE {
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.vid-title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-thumbnail {
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
border-radius: 50%;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
#details {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
.entry {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.thumbnail-container {
|
||||
width: 50vh;
|
||||
float: left;
|
||||
}
|
||||
#details {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.avatar-thumbnail {
|
||||
margin-top: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.video-info {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["video"],
|
||||
|
||||
methods: {
|
||||
parseBottom(video) {
|
||||
const bottomText = [
|
||||
video.shortBylineText?.runs[0].text,
|
||||
video.shortViewCountText?.runs[0].text,
|
||||
];
|
||||
if (video.publishedTimeText?.runs[0].text)
|
||||
bottomText.push(video.publishedTimeText?.runs[0].text);
|
||||
return bottomText.join(" · ");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
import { App as CapacitorApp } from "@capacitor/app";
|
||||
import { mapState } from "vuex";
|
||||
import constants from "~/plugins/constants";
|
||||
import { linkParser } from "~/plugins/utils"
|
||||
import { linkParser } from "~/plugins/utils";
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
|
|
@ -114,19 +114,30 @@ export default {
|
|||
this.$router.push(slug.pathname + slug.search);
|
||||
}
|
||||
});
|
||||
|
||||
// --- Import Twemoji ---///
|
||||
const plugin = document.createElement("script");
|
||||
plugin.setAttribute("src", "//twemoji.maxcdn.com/v/latest/twemoji.min.js");
|
||||
plugin.setAttribute("crossorigin", "anonymous");
|
||||
document.head.appendChild(plugin);
|
||||
},
|
||||
|
||||
methods: {
|
||||
textChanged(text) {
|
||||
if (text.length <= 0) this.response = []; // No text found, no point in calling API
|
||||
if (text.length <= 0) {
|
||||
this.response = [];
|
||||
return;
|
||||
} // No text found, no point in calling API
|
||||
|
||||
//--- User Pastes Link, Direct Them To Video ---//
|
||||
const isLink = linkParser(text);
|
||||
if (isLink) {
|
||||
this.response = [{
|
||||
text: `Watch video from ID: ${isLink}`,
|
||||
id: isLink
|
||||
}];
|
||||
this.response = [
|
||||
{
|
||||
text: `Watch video from ID: ${isLink}`,
|
||||
id: isLink,
|
||||
},
|
||||
];
|
||||
return;
|
||||
}
|
||||
//--- End User Pastes Link, Direct Them To Video ---//
|
||||
|
|
@ -139,9 +150,7 @@ export default {
|
|||
},
|
||||
|
||||
youtubeSearch(item) {
|
||||
const link = item.id
|
||||
? `/watch?v=${item.id}`
|
||||
: `/search?q=${item[0]}`
|
||||
const link = item.id ? `/watch?v=${item.id}` : `/search?q=${item[0]}`;
|
||||
this.$router.push(link);
|
||||
this.search = false;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -25,15 +25,20 @@ export default {
|
|||
const theming = new Promise((resolve) =>
|
||||
// Set timeout is required for $vuetify.theme... dont ask me why -Front
|
||||
setTimeout(() => {
|
||||
this.$vuetify.theme.dark = JSON.parse(localStorage.getItem("darkTheme")) === true;
|
||||
this.$vuetify.theme.dark =
|
||||
JSON.parse(localStorage.getItem("darkTheme")) === true;
|
||||
if (localStorage.getItem("primaryDark") != null)
|
||||
this.$vuetify.theme.themes.dark.primary = localStorage.getItem("primaryDark");
|
||||
this.$vuetify.theme.themes.dark.primary =
|
||||
localStorage.getItem("primaryDark");
|
||||
if (localStorage.getItem("primaryLight") != null)
|
||||
this.$vuetify.theme.themes.light.primary = localStorage.getItem("primaryLight");
|
||||
this.$vuetify.theme.themes.light.primary =
|
||||
localStorage.getItem("primaryLight");
|
||||
if (localStorage.getItem("backgroundDark") != null)
|
||||
this.$vuetify.theme.themes.dark.background = localStorage.getItem("backgroundDark");
|
||||
this.$vuetify.theme.themes.dark.background =
|
||||
localStorage.getItem("backgroundDark");
|
||||
if (localStorage.getItem("backgroundLight") != null)
|
||||
this.$vuetify.theme.themes.light.background = localStorage.getItem("backgroundLight");
|
||||
this.$vuetify.theme.themes.light.background =
|
||||
localStorage.getItem("backgroundLight");
|
||||
this.$vuetube.navigationBar.setTheme(
|
||||
this.$vuetify.theme.currentTheme.background,
|
||||
!this.$vuetify.theme.dark
|
||||
|
|
|
|||
|
|
@ -1,29 +1,44 @@
|
|||
<template>
|
||||
<div class="py-2">
|
||||
<v-list-item v-for="(item, index) in commits" :key="index" class="my-1">
|
||||
<v-card flat class="card my-2 background" :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
|
||||
<v-card
|
||||
flat
|
||||
class="card my-2 background"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
:style="{ borderRadius: `${roundTweak / 2}rem` }"
|
||||
>
|
||||
<v-card-title style="padding: 0 0.25em 0 0.75em">
|
||||
{{ item.author ? item.author.login : item.commit.author.name }}
|
||||
<span class="subtitle background--text" :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
v-text="`• ${item.sha.substring(0, 7)}`" />
|
||||
<span
|
||||
class="subtitle background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
v-text="`• ${item.sha.substring(0, 7)}`"
|
||||
/>
|
||||
<v-spacer />
|
||||
<v-chip v-if="index == 0" class="tags" color="orange" style="
|
||||
border-radius: 0.5rem;
|
||||
border: 2px var(--v-orange-base);
|
||||
">
|
||||
<v-chip
|
||||
v-if="index == 0"
|
||||
class="tags"
|
||||
color="orange"
|
||||
style="border-radius: 0.5rem; border: 2px var(--v-orange-base)"
|
||||
>
|
||||
Latest
|
||||
</v-chip>
|
||||
<v-chip v-if="item.sha == installedVersion" class="tags" color="green" style="
|
||||
border-radius: 0.5rem;
|
||||
border: 2px var(--v-green-base);
|
||||
">
|
||||
<v-chip
|
||||
v-if="item.sha == installedVersion"
|
||||
class="tags"
|
||||
color="green"
|
||||
style="border-radius: 0.5rem; border: 2px var(--v-green-base)"
|
||||
>
|
||||
Installed
|
||||
</v-chip>
|
||||
</v-card-title>
|
||||
|
||||
<div style="margin-left: 1em">
|
||||
<div class="date background--text" :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
v-text="new Date(item.commit.committer.date).toLocaleString()" />
|
||||
<div
|
||||
class="date background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
v-text="new Date(item.commit.committer.date).toLocaleString()"
|
||||
/>
|
||||
{{ item.commit.message }}
|
||||
</div>
|
||||
|
||||
|
|
@ -42,69 +57,65 @@
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
width: 100%;
|
||||
}
|
||||
.card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0.4em;
|
||||
font-size: 0.75em;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
.subtitle {
|
||||
margin: 0.4em;
|
||||
font-size: 0.75em;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
|
||||
.date {
|
||||
transform: translateY(-40%);
|
||||
}
|
||||
.date {
|
||||
transform: translateY(-40%);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.tags {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.btn-icon {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.tags {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Browser } from "@capacitor/browser";
|
||||
import { Browser } from "@capacitor/browser";
|
||||
|
||||
export default {
|
||||
|
||||
computed: {
|
||||
roundTweak() {
|
||||
return this.$store.state.tweaks.roundTweak;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
commits: new Array(),
|
||||
installedVersion: process.env.appVersion,
|
||||
};
|
||||
export default {
|
||||
computed: {
|
||||
roundTweak() {
|
||||
return this.$store.state.tweaks.roundTweak;
|
||||
},
|
||||
async mounted() {
|
||||
const commits = await this.$vuetube.commits;
|
||||
if (commits[0].sha) {
|
||||
//If Commit Valid
|
||||
this.commits = commits;
|
||||
} else {
|
||||
console.log(commits);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
commits: new Array(),
|
||||
installedVersion: process.env.appVersion,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
const commits = await this.$vuetube.commits;
|
||||
if (commits[0].sha) {
|
||||
//If Commit Valid
|
||||
this.commits = commits;
|
||||
} else {
|
||||
console.log(commits);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async openExternal(item) {
|
||||
await Browser.open({
|
||||
url: item.html_url,
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async openExternal(item) {
|
||||
await Browser.open({
|
||||
url: item.html_url
|
||||
});
|
||||
},
|
||||
|
||||
install(item) {
|
||||
this.$vuetube.getRuns(item, (data) => {
|
||||
console.log(data);
|
||||
});
|
||||
},
|
||||
install(item) {
|
||||
this.$vuetube.getRuns(item, (data) => {
|
||||
console.log(data);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
|
||||
<!-- Dev Mode Open -->
|
||||
<v-btn text class="entry" @click="dev()" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -51,7 +50,7 @@ export default {
|
|||
to: "/mods/tweaks",
|
||||
},
|
||||
{ name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
|
||||
{ name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins", disabled: true },
|
||||
{ name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins" },
|
||||
{
|
||||
name: "Updates",
|
||||
icon: "mdi-cloud-download-outline",
|
||||
|
|
@ -68,7 +67,7 @@ export default {
|
|||
if (this.devClicks >= 6) {
|
||||
this.$router.push("/mods/developer");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,108 +1,183 @@
|
|||
<template>
|
||||
<div class="background">
|
||||
<!-- Stock Player -->
|
||||
<videoPlayer
|
||||
<div class="background" id="watch-body">
|
||||
<div
|
||||
class="player-container"
|
||||
style="position: sticky; top: 0; z-index: 696969"
|
||||
:vid-src="vidSrc"
|
||||
ref="player"
|
||||
v-if="useBetaPlayer !== 'true'"
|
||||
/>
|
||||
|
||||
<!-- VueTube Player V1 -->
|
||||
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
|
||||
|
||||
<v-card v-if="loaded" 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"
|
||||
>
|
||||
<!-- Stock Player -->
|
||||
<videoPlayer
|
||||
:vid-src="vidSrc"
|
||||
ref="player"
|
||||
v-if="useBetaPlayer !== 'true'"
|
||||
/>
|
||||
<v-card-text>
|
||||
<div style="margin-bottom: 1rem">
|
||||
{{ views }} views • {{ uploaded }}
|
||||
</div>
|
||||
|
||||
<!-- Scrolling Div For Interactions --->
|
||||
<div style="display: flex; margin-bottom: 1em">
|
||||
<v-list-item
|
||||
v-for="(item, index) in interactions"
|
||||
:key="index"
|
||||
style="padding: 0; flex: 0 0 20%"
|
||||
>
|
||||
<v-btn
|
||||
text
|
||||
class="vertical-button"
|
||||
style="padding: 0; margin: 0"
|
||||
elevation="0"
|
||||
:disabled="item.disabled"
|
||||
@click="callMethodByName(item.actionName)"
|
||||
<!-- VueTube Player V1 -->
|
||||
<vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
|
||||
</div>
|
||||
<div class="content-container">
|
||||
<v-card v-if="loaded" 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="video.title"
|
||||
/>
|
||||
<v-card-text>
|
||||
<div style="margin-bottom: 1rem">
|
||||
<template
|
||||
v-for="text in video.metadata.contents.find(
|
||||
(content) => content.slimVideoInformationRenderer
|
||||
).slimVideoInformationRenderer.collapsedSubtitle.runs"
|
||||
>{{ text.text }}</template
|
||||
>
|
||||
<v-icon v-text="item.icon" />
|
||||
<div
|
||||
class="mt-2"
|
||||
style="font-size: 0.66rem"
|
||||
v-text="item.value || item.name"
|
||||
/>
|
||||
</v-btn>
|
||||
</v-list-item>
|
||||
</div>
|
||||
|
||||
<v-spacer />
|
||||
<v-btn text @click="showMore = !showMore">
|
||||
<v-icon v-if="showMore">mdi-chevron-up</v-icon>
|
||||
<v-icon v-else>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
<!-- Scrolling Div For Interactions --->
|
||||
<div style="display: flex; margin-bottom: 1em">
|
||||
<v-list-item
|
||||
v-for="(item, index) in interactions"
|
||||
:key="index"
|
||||
style="padding: 0; flex: 0 0 20%"
|
||||
>
|
||||
<v-btn
|
||||
text
|
||||
class="vertical-button"
|
||||
style="padding: 0; margin: 0"
|
||||
elevation="0"
|
||||
:disabled="item.disabled"
|
||||
@click="callMethodByName(item.actionName)"
|
||||
>
|
||||
<v-icon v-text="item.icon" />
|
||||
<div
|
||||
class="mt-2"
|
||||
style="font-size: 0.66rem"
|
||||
v-text="item.value || item.name"
|
||||
/>
|
||||
</v-btn>
|
||||
</v-list-item>
|
||||
|
||||
<v-spacer />
|
||||
<v-btn text @click="showMore = !showMore">
|
||||
<v-icon v-if="showMore">mdi-chevron-up</v-icon>
|
||||
<v-icon v-else>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<!-- End Scrolling Div For Interactions --->
|
||||
<!-- <hr /> -->
|
||||
</v-card-text>
|
||||
<!-- <v-bottom-sheet
|
||||
v-model="showMore"
|
||||
color="background"
|
||||
style="z-index: 9999999"
|
||||
>
|
||||
<v-sheet style="padding: 12px">
|
||||
<v-btn block @click="showMore = !showMore"
|
||||
><v-icon>mdi-chevron-down</v-icon></v-btn
|
||||
><br />
|
||||
|
||||
<slim-video-description-renderer
|
||||
class="scroll-y"
|
||||
:render="video.renderedData.description"
|
||||
/>
|
||||
</v-sheet>
|
||||
</v-bottom-sheet> -->
|
||||
<!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
|
||||
<v-sheet style="padding: 1em">
|
||||
<div class="scroll-y">
|
||||
{{ response.renderedData.description }}
|
||||
</div>
|
||||
<!-- End Scrolling Div For Interactions --->
|
||||
<!-- <hr /> -->
|
||||
<p>Channel Stuff</p>
|
||||
</v-card-text>
|
||||
<div v-if="showMore" class="scroll-y ml-2 mr-2">
|
||||
<slim-video-description-renderer :render="description" />
|
||||
</v-sheet>
|
||||
</v-bottom-sheet> -->
|
||||
</v-card>
|
||||
<v-divider />
|
||||
|
||||
<!-- Channel Bar -->
|
||||
<div class="channel-container" v-if="loaded">
|
||||
<v-card class="channel-section background" :to="video.channelUrl">
|
||||
<div id="details">
|
||||
<div class="avatar-link mr-3">
|
||||
<v-img class="avatar-thumbnail" :src="video.channelImg" />
|
||||
</div>
|
||||
<div class="channel-byline">
|
||||
<div class="channel-name" v-text="video.channelName" />
|
||||
<div
|
||||
class="caption background--text"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
|
||||
"
|
||||
v-text="video.channelSubs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="channel-buttons"
|
||||
style="color: rgb(204, 0, 0); text-transform: uppercase"
|
||||
>
|
||||
subscribe
|
||||
</div>
|
||||
</v-card>
|
||||
<v-divider />
|
||||
</div>
|
||||
|
||||
<!-- <v-bottom-sheet
|
||||
v-model="showMore"
|
||||
color="background"
|
||||
style="z-index: 9999999"
|
||||
>
|
||||
<v-sheet style="padding: 1em">
|
||||
<v-btn block @click="showMore = !showMore"
|
||||
><v-icon>mdi-chevron-down</v-icon></v-btn
|
||||
><br />
|
||||
<!-- Description -->
|
||||
<div class="description-container" v-if="showMore">
|
||||
<div class="scroll-y ma-4">
|
||||
<slim-video-description-renderer
|
||||
:render="video.renderedData.description"
|
||||
/>
|
||||
</div>
|
||||
<v-divider />
|
||||
</div>
|
||||
|
||||
<div class="scroll-y">
|
||||
{{ description }}
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-bottom-sheet> -->
|
||||
<!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
|
||||
<v-sheet style="padding: 1em">
|
||||
<div class="scroll-y">
|
||||
{{ description }}
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-bottom-sheet> -->
|
||||
</v-card>
|
||||
<vid-load-renderer v-if="!recommends" />
|
||||
<shelf-renderer v-else :render="recommends" />
|
||||
<!-- Comments -->
|
||||
<div class="comment-container" v-if="loaded && video.commentData">
|
||||
<v-card flat class="background comment-renderer">
|
||||
<v-text class="comment-count keep-spaces">
|
||||
<template v-for="text in video.commentData.headerText.runs">
|
||||
<template v-if="text.bold">
|
||||
<strong :key="text.text">{{ text.text }}</strong>
|
||||
</template>
|
||||
<template v-else>{{ text.text }}</template>
|
||||
</template>
|
||||
</v-text>
|
||||
<v-icon>mdi-unfold-more-horizontal</v-icon>
|
||||
</v-card>
|
||||
<v-divider />
|
||||
</div>
|
||||
|
||||
<!-- Related Videos -->
|
||||
<div class="loaders" v-if="!loaded">
|
||||
<v-skeleton-loader
|
||||
type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
|
||||
/>
|
||||
<vid-load-renderer :count="5" />
|
||||
</div>
|
||||
<item-section-renderer v-else :render="recommends" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Share } from "@capacitor/share";
|
||||
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
||||
import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
|
||||
import { getCpn } from "~/plugins/utils";
|
||||
import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
|
||||
import vuetubePlayer from "~/components/Player/index.vue"
|
||||
import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
|
||||
import vuetubePlayer from "~/components/Player/index.vue";
|
||||
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
||||
|
||||
export default {
|
||||
components: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer, vuetubePlayer },
|
||||
components: {
|
||||
ShelfRenderer,
|
||||
VidLoadRenderer,
|
||||
SlimVideoDescriptionRenderer,
|
||||
vuetubePlayer,
|
||||
ItemSectionRenderer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
interactions: [
|
||||
|
|
@ -131,16 +206,12 @@ export default {
|
|||
],
|
||||
showMore: false,
|
||||
// share: false,
|
||||
title: null,
|
||||
uploaded: null,
|
||||
vidSrc: null,
|
||||
sources: [],
|
||||
description: null,
|
||||
views: null,
|
||||
recommends: null,
|
||||
loaded: false,
|
||||
interval: null,
|
||||
|
||||
video: null,
|
||||
useBetaPlayer: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -166,7 +237,7 @@ export default {
|
|||
this.startTime = Math.floor(Date.now() / 1000);
|
||||
this.getVideo();
|
||||
|
||||
this.useBetaPlayer = localStorage.getItem('debug.BetaPlayer');
|
||||
this.useBetaPlayer = localStorage.getItem("debug.BetaPlayer");
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
|
|
@ -174,10 +245,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
getVideo() {
|
||||
this.likes = 100;
|
||||
this.loaded = false;
|
||||
|
||||
this.$youtube.getVid(this.$route.query.v).then((result) => {
|
||||
this.video = result;
|
||||
console.log("Video info data", result);
|
||||
console.log(result.availableResolutions);
|
||||
|
||||
|
|
@ -191,14 +262,9 @@ export default {
|
|||
].url; // Takes the highest available resolution with both video and Audio. Note this will be lower than the actual highest resolution
|
||||
|
||||
//--- Content Stuff ---//
|
||||
this.title = result.title;
|
||||
this.description = result.renderedData.description; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
|
||||
this.views = parseInt(result.metadata.viewCount).toLocaleString();
|
||||
this.likes = result.metadata.likes.toLocaleString();
|
||||
this.uploaded = result.metadata.uploadDate;
|
||||
this.interactions[0].value = result.metadata.likes.toLocaleString();
|
||||
this.loaded = true;
|
||||
|
||||
this.recommends = result.renderedData.recommendations;
|
||||
// .catch((error) => this.$logger("Watch", error, true));
|
||||
console.log("recommendations:", this.recommends);
|
||||
|
|
@ -227,8 +293,8 @@ export default {
|
|||
async share() {
|
||||
// this.share = !this.share;
|
||||
await Share.share({
|
||||
title: this.title,
|
||||
text: this.title,
|
||||
title: this.video.title,
|
||||
text: this.video.title,
|
||||
url: "https://youtu.be/" + this.$route.query.v,
|
||||
dialogTitle: "Share video",
|
||||
});
|
||||
|
|
@ -274,8 +340,55 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
#watch-body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vertical-button span.v-btn__content {
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.channel-section,
|
||||
.comment-renderer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.channel-section #details,
|
||||
.comment-renderer .comment-count {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-section .channel-byline {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-section .avatar-thumbnail {
|
||||
border-radius: 50%;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.channel-section .channel-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.keep-spaces {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const url = {
|
|||
const ytApiVal = {
|
||||
VERSION: "16.25",
|
||||
CLIENTNAME: "ANDROID",
|
||||
VERSION_WEB: "2.20220318.00.00",
|
||||
VERSION_WEB: "2.20220331.06.00",
|
||||
CLIENT_WEB: 2,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
// https://www.youtube.com/youtubei/v1
|
||||
|
||||
import { Http } from "@capacitor-community/http";
|
||||
import { getBetweenStrings } from "./utils";
|
||||
import { getBetweenStrings, delay } from "./utils";
|
||||
import rendererUtils from "./renderers";
|
||||
import constants from "./constants";
|
||||
|
||||
class Innertube {
|
||||
|
|
@ -39,12 +40,27 @@ class Innertube {
|
|||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
if (this.checkErrorCallback) this.ErrorCallback(err, true);
|
||||
if (this.retry_count >= 10) {
|
||||
this.initAsync();
|
||||
if (this.checkErrorCallback) {
|
||||
this.ErrorCallback(html.data, true);
|
||||
this.ErrorCallback(err, true);
|
||||
}
|
||||
if (this.retry_count < 10) {
|
||||
this.retry_count += 1;
|
||||
if (this.checkErrorCallback)
|
||||
this.ErrorCallback(
|
||||
`retry count: ${this.retry_count}`,
|
||||
false,
|
||||
`An error occurred while trying to init the innertube API. Retrial number: ${this.retry_count}/10`
|
||||
);
|
||||
await delay(5000);
|
||||
await this.initAsync();
|
||||
} else {
|
||||
if (this.checkErrorCallback)
|
||||
this.ErrorCallback("Failed to retrieve Innertube session", true);
|
||||
this.ErrorCallback(
|
||||
"Failed to retrieve Innertube session",
|
||||
true,
|
||||
"An error occurred while retrieving the innertube session. Check the Logs for more information."
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -95,8 +111,11 @@ class Innertube {
|
|||
};
|
||||
}
|
||||
|
||||
async getContinuationsAsync(continuation, type) {
|
||||
let data = { context: this.context, continuation: continuation };
|
||||
async getContinuationsAsync(continuation, type, contextAdditional = {}) {
|
||||
let data = {
|
||||
context: { ...this.context, ...contextAdditional },
|
||||
continuation: continuation,
|
||||
};
|
||||
let url;
|
||||
switch (type) {
|
||||
case "browse":
|
||||
|
|
@ -135,7 +154,17 @@ class Innertube {
|
|||
let data = { context: this.context, videoId: id };
|
||||
const responseNext = await Http.post({
|
||||
url: `${constants.URLS.YT_BASE_API}/next?key=${this.key}`,
|
||||
data: data,
|
||||
data: {
|
||||
...data,
|
||||
...{
|
||||
context: {
|
||||
client: {
|
||||
clientName: constants.YT_API_VALUES.CLIENT_WEB,
|
||||
clientVersion: constants.YT_API_VALUES.VERSION_WEB,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
headers: constants.INNERTUBE_HEADER(this.context.client),
|
||||
}).catch((error) => error);
|
||||
|
||||
|
|
@ -251,64 +280,72 @@ class Innertube {
|
|||
const resolutions = responseInfo.streamingData;
|
||||
const columnUI =
|
||||
responseNext.contents.singleColumnWatchNextResults.results.results;
|
||||
const vidMetadata = columnUI.contents.find(
|
||||
(content) => content.slimVideoMetadataSectionRenderer
|
||||
).slimVideoMetadataSectionRenderer;
|
||||
|
||||
const recommendations = columnUI?.contents.find(
|
||||
(content) => content?.itemSectionRenderer?.targetId == "watch-next-feed"
|
||||
).itemSectionRenderer;
|
||||
|
||||
const ownerData = vidMetadata.contents.find(
|
||||
(content) => content.slimOwnerRenderer
|
||||
)?.slimOwnerRenderer;
|
||||
|
||||
const vidData = {
|
||||
id: details.videoId,
|
||||
title: details.title,
|
||||
isLive: details.isLiveContent,
|
||||
channelName: details.author,
|
||||
channelUrl:
|
||||
columnUI?.contents[0].slimVideoMetadataSectionRenderer?.contents.find(
|
||||
(contents) => contents.elementRenderer
|
||||
)?.newElement?.type?.componentType?.model?.channelBarModel
|
||||
?.videoChannelBarData?.onTap?.innertubeCommand?.browseEndpoint
|
||||
?.canonicalBaseUrl,
|
||||
channelImg:
|
||||
columnUI?.contents[0].slimVideoMetadataSectionRenderer?.contents.find(
|
||||
(contents) => contents.elementRenderer
|
||||
)?.newElement?.type?.componentType?.model?.channelBarModel
|
||||
?.videoChannelBarData?.avatar?.image?.sources[0].url,
|
||||
channelSubs: ownerData?.collapsedSubtitle?.runs[0]?.text,
|
||||
channelUrl: rendererUtils.getNavigationEndpoints(ownerData),
|
||||
channelImg: ownerData?.thumbnail?.thumbnails[0].url,
|
||||
availableResolutions: resolutions?.formats,
|
||||
availableResolutionsAdaptive: resolutions?.adaptiveFormats,
|
||||
metadata: {
|
||||
contents: vidMetadata.contents,
|
||||
description: details.shortDescription,
|
||||
thumbnails: details.thumbnails?.thumbnails,
|
||||
uploadDate:
|
||||
columnUI?.contents[0].slimVideoMetadataSectionRenderer?.contents.find(
|
||||
(contents) => contents.slimVideoDescriptionRenderer
|
||||
)?.slimVideoDescriptionRenderer.publishDate.runs[0].text,
|
||||
isPrivate: details.isPrivate,
|
||||
viewCount: details.viewCount,
|
||||
lengthSeconds: details.lengthSeconds,
|
||||
likes: parseInt(
|
||||
columnUI?.contents[0].slimVideoMetadataSectionRenderer?.contents
|
||||
.find((contents) => contents.slimVideoScrollableActionBarRenderer)
|
||||
?.slimVideoScrollableActionBarRenderer.buttons.find(
|
||||
(button) => button.slimMetadataToggleButtonRenderer.isLike == true
|
||||
vidMetadata.contents
|
||||
.find((content) => content.slimVideoActionBarRenderer)
|
||||
.slimVideoActionBarRenderer.buttons.find(
|
||||
(button) => button.slimMetadataToggleButtonRenderer.isLike
|
||||
)
|
||||
?.slimMetadataToggleButtonRenderer?.button.toggleButtonRenderer?.defaultText?.accessibility?.accessibilityData?.label?.replace(
|
||||
.slimMetadataToggleButtonRenderer.button.toggleButtonRenderer.defaultText.accessibility.accessibilityData.label.replace(
|
||||
/\D/g,
|
||||
""
|
||||
)
|
||||
), // Yes. I know.
|
||||
},
|
||||
renderedData: {
|
||||
description: columnUI?.contents
|
||||
.find((contents) => contents.slimVideoMetadataSectionRenderer)
|
||||
.slimVideoMetadataSectionRenderer?.contents.find(
|
||||
(contents) => contents.slimVideoDescriptionRenderer
|
||||
)?.slimVideoDescriptionRenderer,
|
||||
recommendations: columnUI?.contents.find(
|
||||
(contents) => contents.shelfRenderer
|
||||
).shelfRenderer,
|
||||
description: responseNext.engagementPanels
|
||||
.find(
|
||||
(panel) =>
|
||||
panel.engagementPanelSectionListRenderer.panelIdentifier ==
|
||||
"video-description-ep-identifier"
|
||||
)
|
||||
.engagementPanelSectionListRenderer.content.structuredDescriptionContentRenderer.items.find(
|
||||
(item) => item.expandableVideoDescriptionBodyRenderer
|
||||
).expandableVideoDescriptionBodyRenderer,
|
||||
recommendations: recommendations,
|
||||
recommendationsContinuation:
|
||||
columnUI?.continuations[0].reloadContinuationData?.continuation,
|
||||
recommendations.contents[recommendations.contents.length - 1]
|
||||
.continuationItemRenderer?.continuationEndpoint.continuationCommand
|
||||
.token,
|
||||
},
|
||||
engagementPanels: responseNext.engagementPanels,
|
||||
commentData: columnUI.contents
|
||||
.find((content) => content.itemSectionRenderer?.contents)
|
||||
?.itemSectionRenderer.contents.find(
|
||||
(content) => content.commentsEntryPointHeaderRenderer
|
||||
)?.commentsEntryPointHeaderRenderer,
|
||||
playbackTracking: responseInfo.playbackTracking,
|
||||
};
|
||||
|
||||
console.log(vidData);
|
||||
|
||||
return vidData;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,24 +3,33 @@ class rendererUtils {
|
|||
static getNavigationEndpoints(base) {
|
||||
const navEndpoint = base.navigationEndpoint;
|
||||
if (!navEndpoint) return;
|
||||
if (navEndpoint.webviewEndpoint) {
|
||||
return navEndpoint.webviewEndpoint.url;
|
||||
if (navEndpoint.urlEndpoint) {
|
||||
const params = new Proxy(
|
||||
new URLSearchParams(navEndpoint.urlEndpoint.url),
|
||||
{
|
||||
get: (searchParams, prop) => searchParams.get(prop),
|
||||
}
|
||||
);
|
||||
if (params.q) return decodeURI(params.q);
|
||||
else return new URL(navEndpoint.urlEndpoint.url).pathname;
|
||||
} else if (navEndpoint.browseEndpoint) {
|
||||
return navEndpoint.browseEndpoint.canonicalBaseUrl;
|
||||
} else if (navEndpoint.watchEndpoint) {
|
||||
return `/watch?v=${navEndpoint.watchEndpoint.videoId}`;
|
||||
} else if (navEndpoint.navigationEndpoint) {
|
||||
return; //for now
|
||||
} else if (navEndpoint.searchEndpoint) {
|
||||
return `/search?q=${encodeURI(navEndpoint.searchEndpoint.query)}`;
|
||||
}
|
||||
}
|
||||
|
||||
static checkInternal(base) {
|
||||
const navEndpoint = base.navigationEndpoint;
|
||||
if (!navEndpoint) return false;
|
||||
if (navEndpoint.browseEndpoint || navEndpoint.watchEndpoint) {
|
||||
return true;
|
||||
} else {
|
||||
const tmp = document.createElement("a");
|
||||
tmp.href = this.getNavigationEndpoints(base);
|
||||
if (tmp.host !== window.location.host || !base.navigationEndpoint) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,22 +14,24 @@ const ensureStructure = new Promise(async (resolve, reject) => {
|
|||
|
||||
//--- Ensure Plugins Folder ---//
|
||||
try {
|
||||
await Filesystem.mkdir({ directory: APP_DIRECTORY, recursive: true,
|
||||
await Filesystem.mkdir({
|
||||
directory: APP_DIRECTORY, recursive: true,
|
||||
path: fs.plugins,
|
||||
});
|
||||
} catch (e) { /* Exists */ }
|
||||
|
||||
//--- Ensure Temp Folder ---//
|
||||
try {
|
||||
await Filesystem.mkdir({ directory: APP_DIRECTORY, recursive: true,
|
||||
await Filesystem.mkdir({
|
||||
directory: APP_DIRECTORY, recursive: true,
|
||||
path: fs.temp,
|
||||
});
|
||||
} catch (e) { /* Exists */ }
|
||||
|
||||
perms
|
||||
perms
|
||||
? resolve(true)
|
||||
: reject(false)
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -41,7 +43,7 @@ const module = {
|
|||
let plugins = new Array();
|
||||
|
||||
if (await !ensureStructure) reject("Invalid Structure");
|
||||
|
||||
|
||||
// Temp Plugin List
|
||||
plugins = Filesystem.readdir({
|
||||
directory: APP_DIRECTORY,
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ function hexToRgb(hex) {
|
|||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
|
|
@ -37,16 +37,24 @@ function getCpn() {
|
|||
return result;
|
||||
}
|
||||
|
||||
function linkParser(url){
|
||||
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
||||
var match = url.match(regExp);
|
||||
return (match&&match[7].length==11)? match[7] : false;
|
||||
function getMutationByKey(key, mutations) {
|
||||
if (!key || !mutations) return undefined;
|
||||
return mutations.find((mutation) => mutation.entityKey === key).payload;
|
||||
}
|
||||
function linkParser(url) {
|
||||
console.log("linkParpar", url)
|
||||
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
||||
const match = url.match(regExp);
|
||||
return (match && match[7].length == 11) ? match[7] : false;
|
||||
}
|
||||
const delay = (ms) => new Promise((res) => setTimeout(res, ms));
|
||||
|
||||
module.exports = {
|
||||
getBetweenStrings,
|
||||
hexToRgb,
|
||||
rgbToHex,
|
||||
getCpn,
|
||||
getMutationByKey,
|
||||
linkParser,
|
||||
delay,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import constants from "./constants";
|
|||
import rendererUtils from "./renderers";
|
||||
import { Buffer } from "buffer";
|
||||
import iconv from "iconv-lite";
|
||||
import { Toast } from "@capacitor/toast";
|
||||
|
||||
//--- Logger Function ---//
|
||||
function logger(func, data, isError = false) {
|
||||
|
|
@ -74,9 +75,14 @@ let InnertubeAPI;
|
|||
const innertubeModule = {
|
||||
async getAPI() {
|
||||
if (!InnertubeAPI) {
|
||||
InnertubeAPI = await Innertube.createAsync((message, isError) => {
|
||||
logger(constants.LOGGER_NAMES.innertube, message, isError);
|
||||
});
|
||||
InnertubeAPI = await Innertube.createAsync(
|
||||
(message, isError, shortMessage) => {
|
||||
logger(constants.LOGGER_NAMES.innertube, message, isError);
|
||||
if (shortMessage) {
|
||||
Toast.show({ text: shortMessage });
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
return InnertubeAPI;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ dependencies {
|
|||
implementation project(':capacitor-share')
|
||||
implementation project(':capacitor-splash-screen')
|
||||
implementation project(':capacitor-status-bar')
|
||||
implementation project(':capacitor-toast')
|
||||
implementation project(':hugotomazi-capacitor-navigation-bar')
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,17 +26,38 @@
|
|||
</intent-filter>
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.VIEW" />
|
||||
|
||||
<category android:name="android.intent.category.DEFAULT" />
|
||||
<category android:name="android.intent.category.BROWSABLE" />
|
||||
|
||||
<data android:scheme="http" />
|
||||
<data android:scheme="https" />
|
||||
|
||||
<data android:host="youtu.be" />
|
||||
<data android:host="m.youtube.com" />
|
||||
<data android:host="youtube.com" />
|
||||
<data android:host="m.youtube.com" />
|
||||
<data android:host="www.youtube.com" />
|
||||
<data android:pathPattern="/.*" />
|
||||
<!-- video prefix -->
|
||||
<data android:pathPrefix="/v/" />
|
||||
<data android:pathPrefix="/embed/" />
|
||||
<data android:pathPrefix="/watch" />
|
||||
<data android:pathPrefix="/attribution_link" />
|
||||
<data android:pathPrefix="/shorts/" />
|
||||
<!-- channel prefix -->
|
||||
<data android:pathPrefix="/channel/" />
|
||||
<data android:pathPrefix="/user/" />
|
||||
<data android:pathPrefix="/c/" />
|
||||
<!-- playlist prefix -->
|
||||
<data android:pathPrefix="/playlist" />
|
||||
</intent-filter>
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.VIEW" />
|
||||
|
||||
<category android:name="android.intent.category.DEFAULT" />
|
||||
<category android:name="android.intent.category.BROWSABLE" />
|
||||
|
||||
<data android:scheme="http" />
|
||||
<data android:scheme="https" />
|
||||
<data android:host="youtu.be" />
|
||||
<data android:pathPrefix="/" />
|
||||
</intent-filter>
|
||||
|
||||
</activity>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,10 @@
|
|||
"pkg": "@capacitor/status-bar",
|
||||
"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
|
||||
},
|
||||
{
|
||||
"pkg": "@capacitor/toast",
|
||||
"classpath": "com.capacitorjs.plugins.toast.ToastPlugin"
|
||||
},
|
||||
{
|
||||
"pkg": "@hugotomazi/capacitor-navigation-bar",
|
||||
"classpath": "br.com.tombus.capacitor.plugin.navigationbar.NavigationBarPlugin"
|
||||
|
|
|
|||
|
|
@ -29,5 +29,8 @@ project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capa
|
|||
include ':capacitor-status-bar'
|
||||
project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
|
||||
|
||||
include ':capacitor-toast'
|
||||
project(':capacitor-toast').projectDir = new File('../node_modules/@capacitor/toast/android')
|
||||
|
||||
include ':hugotomazi-capacitor-navigation-bar'
|
||||
project(':hugotomazi-capacitor-navigation-bar').projectDir = new File('../node_modules/@hugotomazi/capacitor-navigation-bar/android')
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ def capacitor_pods
|
|||
pod 'CapacitorShare', :path => '..\..\node_modules\@capacitor\share'
|
||||
pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
|
||||
pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
|
||||
pod 'CapacitorToast', :path => '..\..\node_modules\@capacitor\toast'
|
||||
pod 'HugotomaziCapacitorNavigationBar', :path => '..\..\node_modules\@hugotomazi\capacitor-navigation-bar'
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"@capacitor/share": "^1.1.2",
|
||||
"@capacitor/splash-screen": "^1.2.2",
|
||||
"@capacitor/status-bar": "^1.0.8",
|
||||
"@capacitor/toast": "^1.0.8",
|
||||
"@hugotomazi/capacitor-navigation-bar": "^1.1.1",
|
||||
"iconv-lite": "^0.6.3"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue