@uxf/wysiwyg 11.72.0 → 11.73.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/wysiwyg",
-    "version": "11.72.0",
+    "version": "11.73.0",
     "description": "UXF Wysiwyg editor",
     "author": "Robin Dvorak <dvorak@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/wysiwyg",
@@ -25,9 +25,9 @@
         "@udecode/plate-reset-node": "20.7.2",
         "@udecode/plate-select": "20.7.2",
         "@udecode/plate-trailing-block": "20.7.2",
-        "@uxf/core": "11.70.0",
-        "@uxf/core-react": "11.71.0",
-        "@uxf/ui": "11.72.0",
+        "@uxf/core": "11.72.3",
+        "@uxf/core-react": "11.72.3",
+        "@uxf/ui": "11.72.3",
         "slate": "0.90.0",
         "slate-history": "0.86.0",
         "slate-hyperscript": "0.77.0",

package/plugins/embedded/video/insert-video.d.ts

@@ -1,2 +1,2 @@
-import { UxfEditor } from "../../../types";
-export declare const insertVideo: (editor: UxfEditor, url: string, embeddedUrl: string, provider: string, videoId: string) => void;
+import { UxfEditor, type UxfVideoMetaData } from "../../../types";
+export declare const insertVideo: (editor: UxfEditor, url: string, embeddedUrl: string, provider: string, videoId: string, metaData: UxfVideoMetaData | null) => void;

package/plugins/embedded/video/insert-video.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertVideo = void 0;
 const utils_1 = require("../../../utils");
 const create_video_plugin_1 = require("./create-video-plugin");
-const insertVideo = (editor, url, embeddedUrl, provider, videoId) => {
+const insertVideo = (editor, url, embeddedUrl, provider, videoId, metaData) => {
     const text = { text: "" };
     const element = {
         type: create_video_plugin_1.ELEMENT_VIDEO_EMBED,
@@ -12,6 +12,7 @@ const insertVideo = (editor, url, embeddedUrl, provider, videoId) => {
         provider,
         videoId,
         children: [text],
+        metaData,
     };
     (0, utils_1.insertVoid)(editor, element);
 };

package/plugins/embedded/video/update-video.d.ts

@@ -1,2 +1,2 @@
-import { UxfEditor } from "../../../types";
-export declare const updateVideo: (editor: UxfEditor, url: string, embeddedUrl: string, provider: string, videoId: string) => void;
+import { UxfEditor, type UxfVideoMetaData } from "../../../types";
+export declare const updateVideo: (editor: UxfEditor, url: string, embeddedUrl: string, provider: string, videoId: string, metaData: UxfVideoMetaData | null) => void;

package/plugins/embedded/video/update-video.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateVideo = void 0;
 const plate_common_1 = require("@udecode/plate-common");
-const updateVideo = (editor, url, embeddedUrl, provider, videoId) => (0, plate_common_1.setNodes)(editor, {
+const updateVideo = (editor, url, embeddedUrl, provider, videoId, metaData) => (0, plate_common_1.setNodes)(editor, {
     url,
     embeddedUrl,
     provider,
     videoId,
+    metaData,
 });
 exports.updateVideo = updateVideo;

package/types.d.ts

@@ -58,6 +58,21 @@ export interface UxfOrderedListElement extends UxfBlockElement {
     type: "ol";
     children: LiElement[];
 }
+export type UxfVideoMetaData = {
+    title: string;
+    description: string;
+    authorName: string;
+    authorUrl: string;
+    width: number;
+    height: number;
+    duration: number;
+    uploadDate: string;
+    thumbnail: {
+        width: number;
+        height: number;
+        url: string;
+    };
+};
 export interface UxfVideoElement extends UxfBlockElement {
     type: "video";
     url: string;
@@ -65,6 +80,7 @@ export interface UxfVideoElement extends UxfBlockElement {
     provider: string;
     videoId: string;
     children: [EmptyText];
+    metaData?: Partial<UxfVideoMetaData> | null;
 }
 export interface UxfButtonElement extends UxfBlockElement {
     type: "button";

package/ui/video/insert-video-modal-content.js

@@ -30,6 +30,7 @@ const utils_1 = require("../../plugins/embedded/utils");
 const insert_video_1 = require("../../plugins/embedded/video/insert-video");
 const update_video_1 = require("../../plugins/embedded/video/update-video");
 const context_1 = require("../../translations/context");
+const get_video_meta_data_1 = require("../../utils/get-video-meta-data");
 const modal_buttons_1 = require("../components/modal/modal-buttons");
 const modal_content_1 = require("../components/modal/modal-content");
 const utils_2 = require("../utils");
@@ -43,18 +44,19 @@ const InsertVideoModalContent = ({ editor, editedVideo }) => {
         ? { id: editedVideo.videoId, provider: editedVideo.provider, url: editedVideo.embeddedUrl }
         : undefined);
     const [error, setError] = (0, react_1.useState)();
-    const onSubmit = (0, react_1.useCallback)((event) => {
+    const onSubmit = (0, react_1.useCallback)(async (event) => {
         event.preventDefault();
         setEmbedUrl((0, utils_1.parseVideoUrl)(url));
         if (!((embedUrl === null || embedUrl === void 0 ? void 0 : embedUrl.url) && embedUrl.provider && embedUrl.id)) {
             setError("Neplatná URL adresa.");
             return;
         }
+        const metaData = await (0, get_video_meta_data_1.getVideoMetaData)(embedUrl.provider, embedUrl.id);
         if (editedVideo) {
-            (0, update_video_1.updateVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id);
+            (0, update_video_1.updateVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id, metaData);
         }
         else {
-            (0, insert_video_1.insertVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id);
+            (0, insert_video_1.insertVideo)(editor, url, embedUrl.url, embedUrl.provider, embedUrl.id, metaData);
         }
         (0, utils_2.closeModalWithFocus)(editor);
     }, [editedVideo, editor, embedUrl, url]);

package/utils/get-video-meta-data.d.ts

@@ -0,0 +1,2 @@
+import type { UxfVideoMetaData } from "../types";
+export declare function getVideoMetaData(provider: string, id: string): Promise<UxfVideoMetaData | null>;

package/utils/get-video-meta-data.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVideoMetaData = getVideoMetaData;
+function getOembedEndpoint(provider, id) {
+    switch (provider) {
+        case "youtube":
+            return `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`;
+        case "vimeo":
+            return `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${id}`;
+        default:
+            return null;
+    }
+}
+async function getVideoMetaData(provider, id) {
+    const endpoint = getOembedEndpoint(provider, id);
+    if (endpoint === null) {
+        return null;
+    }
+    return fetch(endpoint)
+        .then((res) => res.json())
+        .then((data) => ({
+        authorName: data.author_name,
+        authorUrl: data.author_url,
+        width: data.width,
+        height: data.height,
+        description: data.description,
+        duration: data.duration,
+        uploadDate: data.upload_date,
+        thumbnail: {
+            width: data.thumbnail_width,
+            height: data.thumbnail_height,
+            url: data.thumbnail_url,
+        },
+        title: data.title,
+    }))
+        .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.error(e);
+        return null;
+    });
+}