mirror of https://github.com/VueTubeApp/VueTube
Merge pull request #192 from 404-Program-not-found/main
fixed error with video recommendations not playing, fixed problems with search, added description rendering
This commit is contained in:
commit
b4bb99db7e
|
@ -0,0 +1,32 @@
|
||||||
|
<template>
|
||||||
|
<div class="description" style="white-space: pre-line">
|
||||||
|
<template v-for="(text, index) in render.description.runs">
|
||||||
|
<template v-if="text.navigationEndpoint">
|
||||||
|
<a :href="parseLinks(text)" :key="index">{{ text.text }}</a>
|
||||||
|
</template>
|
||||||
|
<template v-else> {{ text.text }} </template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ["render"],
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
parseLinks(base) {
|
||||||
|
const navEndpoint = base.navigationEndpoint;
|
||||||
|
if (!navEndpoint) return;
|
||||||
|
if (navEndpoint.webviewEndpoint) {
|
||||||
|
return base.text;
|
||||||
|
} else if (navEndpoint.browseEndpoint) {
|
||||||
|
return navEndpoint.browseEndpoint.canonicalBaseUrl;
|
||||||
|
} else if (navEndpoint.navigationEndpoint) {
|
||||||
|
return; //for now
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -137,9 +137,5 @@ export default {
|
||||||
return bottomText.join(" · ");
|
return bottomText.join(" · ");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
|
||||||
console.log("gridVideoRenderer received: ", this.video);
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -128,6 +128,7 @@ export default {
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
textChanged(text) {
|
textChanged(text) {
|
||||||
|
if (text.length <= 0) this.response = []; // No text found, no point in calling API
|
||||||
this.$youtube.autoComplete(text, (res) => {
|
this.$youtube.autoComplete(text, (res) => {
|
||||||
const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
|
const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
|
||||||
this.response = JSON.parse(data)[1];
|
this.response = JSON.parse(data)[1];
|
||||||
|
|
|
@ -60,7 +60,7 @@
|
||||||
<p>Channel Stuff</p>
|
<p>Channel Stuff</p>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<div v-if="showMore" class="scroll-y ml-2 mr-2">
|
<div v-if="showMore" class="scroll-y ml-2 mr-2">
|
||||||
{{ description }}
|
<slim-video-description-renderer :render="description">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <v-bottom-sheet
|
<!-- <v-bottom-sheet
|
||||||
|
@ -102,9 +102,10 @@
|
||||||
import { Share } from "@capacitor/share";
|
import { Share } from "@capacitor/share";
|
||||||
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
||||||
import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
|
import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
|
||||||
|
import SlimVideoDescriptionRenderer from '../components/UtilRenderers/slimVideoDescriptionRenderer.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ShelfRenderer, VidLoadRenderer },
|
components: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
interactions: [
|
interactions: [
|
||||||
|
@ -150,7 +151,7 @@ export default {
|
||||||
handler(newRt, oldRt) {
|
handler(newRt, oldRt) {
|
||||||
if (newRt.query.v != oldRt.query.v) {
|
if (newRt.query.v != oldRt.query.v) {
|
||||||
// Exit fullscreen if currently in fullscreen
|
// Exit fullscreen if currently in fullscreen
|
||||||
this.$refs.player.webkitExitFullscreen();
|
if (this.$refs.player) this.$refs.player.webkitExitFullscreen();
|
||||||
// Reset player and run getVideo function again
|
// Reset player and run getVideo function again
|
||||||
this.vidSrc = "";
|
this.vidSrc = "";
|
||||||
this.getVideo();
|
this.getVideo();
|
||||||
|
@ -181,7 +182,7 @@ export default {
|
||||||
|
|
||||||
//--- Content Stuff ---//
|
//--- Content Stuff ---//
|
||||||
this.title = result.title;
|
this.title = result.title;
|
||||||
this.description = result.metadata.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.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 = result.metadata.viewCount.toLocaleString();
|
this.views = result.metadata.viewCount.toLocaleString();
|
||||||
this.likes = result.metadata.likes.toLocaleString();
|
this.likes = result.metadata.likes.toLocaleString();
|
||||||
this.uploaded = result.metadata.uploadDate;
|
this.uploaded = result.metadata.uploadDate;
|
||||||
|
|
|
@ -19,7 +19,6 @@ const ytApiVal = {
|
||||||
module.exports = {
|
module.exports = {
|
||||||
URLS: url,
|
URLS: url,
|
||||||
YT_API_VALUES: ytApiVal,
|
YT_API_VALUES: ytApiVal,
|
||||||
|
|
||||||
LOGGER_NAMES: {
|
LOGGER_NAMES: {
|
||||||
search: "Search",
|
search: "Search",
|
||||||
autoComplete: "AutoComplete",
|
autoComplete: "AutoComplete",
|
||||||
|
|
|
@ -181,9 +181,11 @@ class Innertube {
|
||||||
response.data.output?.playabilityStatus?.status == ("ERROR" || undefined)
|
response.data.output?.playabilityStatus?.status == ("ERROR" || undefined)
|
||||||
)
|
)
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`Could not get information for video: ${response.status_code ||
|
`Could not get information for video: ${
|
||||||
|
response.status_code ||
|
||||||
response.data.output?.playabilityStatus?.status
|
response.data.output?.playabilityStatus?.status
|
||||||
} - ${response.message || response.data.output?.playabilityStatus?.reason
|
} - ${
|
||||||
|
response.message || response.data.output?.playabilityStatus?.reason
|
||||||
}`
|
}`
|
||||||
);
|
);
|
||||||
const responseInfo = response.data.output;
|
const responseInfo = response.data.output;
|
||||||
|
@ -241,7 +243,7 @@ class Innertube {
|
||||||
.find((contents) => contents.slimVideoMetadataSectionRenderer)
|
.find((contents) => contents.slimVideoMetadataSectionRenderer)
|
||||||
.slimVideoMetadataSectionRenderer?.contents.find(
|
.slimVideoMetadataSectionRenderer?.contents.find(
|
||||||
(contents) => contents.slimVideoDescriptionRenderer
|
(contents) => contents.slimVideoDescriptionRenderer
|
||||||
)?.slimVideoDescriptionRenderer.description.runs,
|
)?.slimVideoDescriptionRenderer,
|
||||||
recommendations: columnUI?.contents.find(
|
recommendations: columnUI?.contents.find(
|
||||||
(contents) => contents.shelfRenderer
|
(contents) => contents.shelfRenderer
|
||||||
).shelfRenderer,
|
).shelfRenderer,
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { Http } from "@capacitor-community/http";
|
||||||
import Innertube from "./innertube";
|
import Innertube from "./innertube";
|
||||||
import constants from "./constants";
|
import constants from "./constants";
|
||||||
import useRender from "./renderers";
|
import useRender from "./renderers";
|
||||||
|
import { Buffer } from "buffer";
|
||||||
|
|
||||||
//--- Logger Function ---//
|
//--- Logger Function ---//
|
||||||
function logger(func, data, isError = false) {
|
function logger(func, data, isError = false) {
|
||||||
|
@ -14,19 +15,39 @@ function logger(func, data, isError = false) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getEncoding(contentType) {
|
||||||
|
const re = /charset=([^()<>@,;:\"/[\]?.=\s]*)/i;
|
||||||
|
const content = re.exec(contentType);
|
||||||
|
console.log(content);
|
||||||
|
if (!content || content[1].toLowerCase() == "utf-8") {
|
||||||
|
return "utf8";
|
||||||
|
}
|
||||||
|
if (content[1].toLowerCase() == "iso-8859-1") {
|
||||||
|
return "latin1";
|
||||||
|
}
|
||||||
|
if (content[1].toLowerCase() == "utf16le") {
|
||||||
|
return "utf16le";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const searchModule = {
|
const searchModule = {
|
||||||
logs: new Array(),
|
logs: new Array(),
|
||||||
|
|
||||||
//--- Get YouTube's Search Auto Complete ---//
|
//--- Get YouTube's Search Auto Complete ---//
|
||||||
autoComplete(text, callback) {
|
autoComplete(text, callback) {
|
||||||
Http.request({
|
Http.get({
|
||||||
method: "GET",
|
url: `${constants.URLS.YT_SUGGESTIONS}/search?q=${encodeURIComponent(
|
||||||
url: `${constants.URLS.YT_SUGGESTIONS}/search`,
|
text
|
||||||
params: { client: "youtube", q: text },
|
)}&client=youtube&ds=yt`,
|
||||||
|
responseType: "arraybuffer",
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
logger(constants.LOGGER_NAMES.autoComplete, res);
|
const contentType = res.headers["Content-Type"];
|
||||||
callback(res.data);
|
// make a new buffer object from res.data
|
||||||
|
const buffer = Buffer.from(res.data, "base64");
|
||||||
|
// convert res.data from iso-8859-1 to utf-8
|
||||||
|
const data = buffer.toString(getEncoding(contentType));
|
||||||
|
logger(constants.LOGGER_NAMES.autoComplete, data);
|
||||||
|
callback(data);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
logger(constants.LOGGER_NAMES.autoComplete, err, true);
|
logger(constants.LOGGER_NAMES.autoComplete, err, true);
|
||||||
|
|
Loading…
Reference in New Issue