feat: perf: lighter non-interactive reference widget by default

appinfo/info.xml

@@ -24,7 +24,7 @@ and a link preview widget for video links.]]></description>
     <screenshot>https://github.com/julien-nc/integration_peertube/raw/main/img/screenshot3.jpg</screenshot>
     <screenshot>https://github.com/julien-nc/integration_peertube/raw/main/img/screenshot4.jpg</screenshot>
     <dependencies>
-        <nextcloud min-version="32" max-version="32"/>
+        <nextcloud min-version="32" max-version="33"/>
     </dependencies>
     <settings>
         <admin>OCA\Peertube\Settings\Admin</admin>

lib/Reference/PeertubeReferenceProvider.php

@@ -18,7 +18,6 @@
 use OCP\Collaboration\Reference\LinkReferenceProvider;
 use OCP\Collaboration\Reference\Reference;
 use OCP\IL10N;
-
 use OCP\IURLGenerator;
 use Throwable;
 
@@ -106,25 +105,36 @@ public function resolveReference(string $referenceText): ?IReference {
 					return $this->linkReferenceProvider->resolveReference($referenceText);
 				}
 
-				$videoInfo = $this->peertubeAPIService->getVideoInfo($instanceUrl, $videoId);
-				if (!empty($videoInfo['error'])) {
+				$videoInfo = [];
+				$videoInfoRaw = $this->peertubeAPIService->getVideoInfo($instanceUrl, $videoId);
+				if (!empty($videoInfoRaw['error'])) {
 					return $this->linkReferenceProvider->resolveReference($referenceText);
 				}
-				$videoInfo['embed_url'] = $instanceUrl . $videoInfo['embedPath'];
 				$reference = new Reference($referenceText);
-				$reference->setTitle($videoInfo['name'] ?? '???');
+				$reference->setTitle($videoInfoRaw['name'] ?? '???');
+				$reference->setDescription($videoInfoRaw['truncatedDescription'] ?? '');
 				$thumbnailUrl = $this->urlGenerator->linkToRouteAbsolute(
 					Application::APP_ID . '.peertubeAPI.getThumbnail',
 					[
-						'thumbnailPath' => $videoInfo['thumbnailPath'] ?? '',
+						'thumbnailPath' => $videoInfoRaw['thumbnailPath'] ?? '',
 						'searchInstanceUrl' => $instanceUrl,
-						'fallbackName' => $videoInfo['name'] ?? '???',
+						'fallbackName' => $videoInfoRaw['name'] ?? '???',
 					]
 				);
+
+				// add things here for opengraph, id, name, description, thumb, link
+				$videoInfo['id'] = $referenceText . $videoInfoRaw['uuid'];
+				$videoInfo['name'] = $videoInfoRaw['name'];
+				$videoInfo['description'] = $videoInfoRaw['truncatedDescription'] ?? '';
+				$videoInfo['thumb'] = $thumbnailUrl;
+				$videoInfo['link'] = $referenceText;
+				$videoInfo['embed_url'] = $instanceUrl . $videoInfoRaw['embedPath'];
+
 				$reference->setImageUrl($thumbnailUrl);
+				$reference->setUrl($referenceText);
 				$reference->setRichObject(
 					self::RICH_OBJECT_TYPE_VIDEO,
-					$videoInfo
+					$videoInfo,
 				);
 				return $reference;
 			} catch (Exception|Throwable $e) {

src/components/VideoReferenceWidget.vue

@@ -4,7 +4,13 @@
 -->
 
 <template>
-	<iframe :title="richObject.name"
+	<NcReferenceWidget
+		v-if="!interactive && reference"
+		class="non-interactive-widget"
+		:reference="reference" />
+	<iframe
+		v-if="interactive"
+		:title="richObject.name"
 		:src="richObject.embed_url"
 		:allowfullscreen="true"
 		sandbox="allow-same-origin allow-scripts allow-popups"
@@ -13,33 +19,47 @@
 		frameborder="0" />
 </template>
 
-<script>
-export default {
+<script setup>
+import { computed } from 'vue'
+import { NcReferenceWidget } from '@nextcloud/vue/components/NcRichText'
+
+defineOptions({
 	name: 'VideoReferenceWidget',
 
 	components: {
+		NcReferenceWidget,
 	},
+})
 
-	props: {
-		richObject: {
-			type: Object,
-			default: null,
-		},
+const props = defineProps({
+	richObject: {
+		type: Object,
+		default: null,
 	},
 
-	data() {
-		return {
-		}
+	interactive: {
+		type: Boolean,
+		default: false,
 	},
 
-	computed: {
+	accessible: {
+		type: Boolean,
+		default: false,
 	},
+})
 
-	methods: {
-	},
-}
+const reference = computed(() => ({
+	richObjectType: 'open-graph',
+	richObject: props.richObject,
+	accessible: props.accessible,
+	openGraphObject: { ...props.richObject },
+}))
 </script>
 
 <style scoped lang="scss">
-// nothing yet
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+:global(.non-interactive-widget a) {
+	border: unset !important;
+	margin: unset !important;
+}
 </style>

src/reference.js

@@ -10,11 +10,13 @@ import { registerWidget } from '@nextcloud/vue/components/NcRichText'
 __webpack_nonce__ = getCSPNonce()
 __webpack_public_path__ = linkTo('integration_peertube', 'js/') // eslint-disable-line
 
-registerWidget('integration_peertube_video', async (el, { richObject }) => {
+registerWidget('integration_peertube_video', async (el, { richObject, accessible, interactive }) => {
 	const { createApp } = await import(/* webpackChunkName: "vue-lazy" */'vue')
 	const { default: VideoReferenceWidget } = await import(/* webpackChunkName: "reference-video-lazy" */'./components/VideoReferenceWidget.vue')
 	const app = createApp(VideoReferenceWidget, {
 		richObject,
+		accessible,
+		interactive,
 	})
 	app.mixin({ methods: { t, n } })
 	app.mount(el)