mirror of https://github.com/Troplo/Colubrina.git
195 lines
5.4 KiB
Vue
195 lines
5.4 KiB
Vue
<template>
|
|
<span>
|
|
<v-card
|
|
v-if="embed.type === 'image'"
|
|
:min-width="!$vuetify.breakpoint.mobile ? 400 : 0"
|
|
:max-width="500"
|
|
elevation="0"
|
|
color="card"
|
|
>
|
|
<v-hover v-slot="{ hover }">
|
|
<div>
|
|
<v-img
|
|
contain
|
|
:max-width="500"
|
|
:max-height="500"
|
|
:min-height="100"
|
|
:min-width="100"
|
|
:src="$store.state.baseURL + embed.mediaProxyLink"
|
|
@click="setImagePreview(embed)"
|
|
>
|
|
<template #placeholder>
|
|
<v-row class="fill-height ma-0" align="center" justify="center">
|
|
<v-progress-circular indeterminate color="grey lighten-5" />
|
|
</v-row>
|
|
</template>
|
|
<template #default>
|
|
<v-fade-transition v-if="hover">
|
|
<v-overlay absolute>
|
|
<v-icon large>mdi-arrow-expand-all</v-icon>
|
|
</v-overlay>
|
|
</v-fade-transition>
|
|
</template>
|
|
</v-img>
|
|
</div>
|
|
</v-hover>
|
|
</v-card>
|
|
<v-card
|
|
v-if="embed.type !== 'image'"
|
|
elevation="0"
|
|
:color="embed.type === 'embed-v1' ? embed.backgroundColor : 'bg'"
|
|
:max-width="400"
|
|
:min-width="!$vuetify.breakpoint.mobile ? 300 : 0"
|
|
class="ml-1 rounded-xl mb-1 mr-1"
|
|
>
|
|
<v-container fluid>
|
|
<v-row v-if="embed.type === 'openGraph'">
|
|
<v-col
|
|
v-if="embed.openGraph.ogImage"
|
|
cols="12"
|
|
class="text-xs-center"
|
|
>
|
|
<v-img
|
|
:src="
|
|
embed.openGraph.ogImage?.url || embed.openGraph.ogImage[0]?.url
|
|
"
|
|
class="elevation-1"
|
|
contain
|
|
:aspect-ratio="16 / 9"
|
|
>
|
|
<template #placeholder>
|
|
<v-row class="fill-height ma-0" align="center" justify="center">
|
|
<v-progress-circular indeterminate color="grey lighten-5" />
|
|
</v-row>
|
|
</template>
|
|
</v-img>
|
|
</v-col>
|
|
<v-col cols="12" class="text-xs-center">
|
|
<h4>
|
|
{{ embed.openGraph.ogSiteName }}
|
|
</h4>
|
|
<a :href="embed.link" target="_blank" style="text-decoration: none">
|
|
<h3>
|
|
{{ embed.openGraph.ogTitle }}
|
|
</h3>
|
|
</a>
|
|
<p v-if="embed.openGraph.ogDescription">
|
|
{{ embed.openGraph.ogDescription }}
|
|
</p>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-else-if="embed.type === 'embed-v1'">
|
|
<v-col v-if="embed.headerImage" cols="12" class="text-xs-center">
|
|
<v-img
|
|
:src="
|
|
embed.openGraph.headerImage?.url ||
|
|
embed.openGraph.headerImage[0]?.url
|
|
"
|
|
class="elevation-1"
|
|
contain
|
|
:aspect-ratio="16 / 9"
|
|
>
|
|
<template #placeholder>
|
|
<v-row class="fill-height ma-0" align="center" justify="center">
|
|
<v-progress-circular indeterminate color="grey lighten-5" />
|
|
</v-row>
|
|
</template>
|
|
</v-img>
|
|
</v-col>
|
|
<v-col cols="12" class="text-xs-center">
|
|
<h4 v-if="embed.title">
|
|
{{ embed.title }}
|
|
</h4>
|
|
<p v-if="embed.description">
|
|
{{ embed.description }}
|
|
</p>
|
|
<v-row
|
|
v-for="(graph, index) in embed.graphs"
|
|
:key="'graph-' + index"
|
|
>
|
|
<v-col cols="12" class="text-xs-center">
|
|
<h3>
|
|
{{ graph.name }}
|
|
</h3>
|
|
<Chart
|
|
v-if="graph.data"
|
|
:chart-data="graph.data"
|
|
:options="graphOptions"
|
|
/>
|
|
<p v-else>Chart data could not be loaded.</p>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row
|
|
v-for="(field, index) in embed.fields"
|
|
:id="'field-' + index"
|
|
:key="'field-' + index"
|
|
class="mt-1"
|
|
>
|
|
<v-col
|
|
cols="12"
|
|
class="text-xs-center"
|
|
style="white-space: pre-wrap"
|
|
>
|
|
<h4>{{ field.name }}</h4>
|
|
<p>{{ field.value }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<a
|
|
v-if="embed.link"
|
|
:href="embed.link.url"
|
|
target="_blank"
|
|
style="text-decoration: none"
|
|
>
|
|
<h3>
|
|
{{ embed.link.title }}
|
|
</h3>
|
|
</a>
|
|
<small v-if="embed.footer">
|
|
{{ embed.footer }}
|
|
</small>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-else>
|
|
<v-container>
|
|
<h4>You must update Colubrina to see this embed.</h4>
|
|
</v-container>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
import { Line as Chart } from "vue-chartjs/legacy"
|
|
import {
|
|
CategoryScale,
|
|
Chart as ChartJS,
|
|
Legend,
|
|
LinearScale,
|
|
LineElement,
|
|
PointElement,
|
|
Title,
|
|
Tooltip
|
|
} from "chart.js"
|
|
|
|
ChartJS.register(
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement
|
|
)
|
|
|
|
export default {
|
|
name: "Embed",
|
|
components: {
|
|
Chart
|
|
},
|
|
props: ["embed", "setImagePreview"]
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|