@soppiya/app-bridge 1.0.0

package/dist/components/media/useStorage.js

@@ -0,0 +1,17 @@
+import { useQuery } from "@apollo/client/react";
+import { mediaUsagesQuery, storagePlanQuery } from "./graph.js";
+const useStorage = ()=>{
+    const { data } = useQuery(storagePlanQuery);
+    const { data: mediaUsageData, refetch: refetchMediaUsage } = useQuery(mediaUsagesQuery);
+    const plan = data?.plan;
+    const totalStorage = ((plan?.storage ?? 0) + (plan?.package?.storage ?? 0)) * 1048576;
+    const mediaUsage = Number(mediaUsageData?.mediaUsage ?? 0);
+    const usageStorage = mediaUsage / totalStorage * 100;
+    return {
+        mediaUsage,
+        totalStorage,
+        usageStorage,
+        refetchMediaUsage
+    };
+};
+export { useStorage };

package/dist/components/media/useThumbnail.d.ts

@@ -0,0 +1,5 @@
+import type { Maybe, Media } from "../../shared/graphql/graphql";
+export declare const useThumbnail: (media: Maybe<Media | undefined>, seekTo?: number) => {
+    url: string | null | undefined;
+    loading: boolean;
+};

package/dist/components/media/useThumbnail.js

@@ -0,0 +1,64 @@
+import docs from "../../assets/images/docs.js";
+import pdf from "../../assets/images/pdf.js";
+import ppt from "../../assets/images/ppt.js";
+import rar from "../../assets/images/rar.js";
+import sound from "../../assets/images/sound.js";
+import txt from "../../assets/images/txt.js";
+import xls from "../../assets/images/xls.js";
+import zip from "../../assets/images/zip.js";
+import { useEffect, useState } from "react";
+const useThumbnail = (media, seekTo = 1)=>{
+    const [url, setUrl] = useState(media?.url);
+    const [loading, setLoading] = useState(false);
+    useEffect(()=>{
+        switch(media?.type){
+            case "video":
+                {
+                    setLoading(true);
+                    const video = document.createElement("video");
+                    video.preload = "auto";
+                    video.muted = true;
+                    video.crossOrigin = "anonymous";
+                    video.src = String(media?.url);
+                    video.onloadeddata = ()=>{
+                        video.currentTime = seekTo;
+                    };
+                    video.onseeked = ()=>{
+                        const canvas = document.createElement("canvas");
+                        canvas.width = video.videoWidth;
+                        canvas.height = video.videoHeight;
+                        const ctx = canvas.getContext("2d");
+                        if (!ctx) return;
+                        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                        const imageUrl = canvas.toDataURL("image/png");
+                        setUrl(imageUrl);
+                        setLoading(false);
+                    };
+                    break;
+                }
+            case "audio":
+                setUrl(sound);
+                break;
+            case "file":
+                setUrl(()=>{
+                    if (media?.mimetype?.includes("pdf")) return pdf;
+                    if (media?.mimetype?.includes("vnd.openxmlformats-officedocument.spreadsheetml.sheet") || media?.mimetype?.includes("vnd.ms-excel")) return xls;
+                    if (media?.mimetype?.includes("x-zip-compressed")) return zip;
+                    if (media?.mimetype?.includes("x-compressed")) return rar;
+                    if (media?.mimetype?.includes("text/plain") || media?.mimetype?.includes("rtf")) return txt;
+                    else if (media?.mimetype?.includes("vnd.openxmlformats-officedocument.presentationml.presentation") || media?.mimetype?.includes("vnd.ms-powerpoint")) return ppt;
+                    else if (media?.mimetype?.includes("vnd.openxmlformats-officedocument.wordprocessingml.document") || media?.mimetype?.includes("msword")) return docs;
+                });
+                break;
+        }
+        if (media?.type !== "video") return;
+    }, [
+        media,
+        seekTo
+    ]);
+    return {
+        url,
+        loading
+    };
+};
+export { useThumbnail };

package/dist/components/savebar/SaveBar.d.ts

@@ -0,0 +1,9 @@
+interface IProps {
+    open?: boolean;
+    confirmationOnLeave?: boolean;
+    children?: React.ReactNode;
+    onShow?: () => void;
+    onHide?: () => void;
+}
+declare const SaveBar: ({ open, confirmationOnLeave, children, onHide, onShow, }: IProps) => null;
+export default SaveBar;

package/dist/components/savebar/SaveBar.js

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+const SaveBar = ({ open, confirmationOnLeave, children, onHide, onShow })=>{
+    useEffect(()=>{
+        window.initSaveBar({
+            open,
+            children: open ? children : null,
+            confirmationOnLeave,
+            onShow,
+            onHide
+        });
+    }, [
+        open,
+        children,
+        confirmationOnLeave,
+        onShow,
+        onHide
+    ]);
+    return null;
+};
+const savebar_SaveBar = SaveBar;
+export { savebar_SaveBar as default };

package/dist/components/savebar/index.d.ts

@@ -0,0 +1 @@
+export { default as SaveBar } from "./SaveBar";

package/dist/components/savebar/index.js

@@ -0,0 +1,2 @@
+import SaveBar from "./SaveBar.js";
+export { SaveBar };

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useSoppiyaBridge } from './useSoppiyaBridge';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+import { useSoppiyaBridge } from "./useSoppiyaBridge.js";
+export { useSoppiyaBridge };

package/dist/hooks/useSoppiyaBridge.d.ts

@@ -0,0 +1,3 @@
+export declare const useSoppiyaBridge: () => {
+    navigate: (to: string) => void;
+};

package/dist/hooks/useSoppiyaBridge.js

@@ -0,0 +1,9 @@
+const useSoppiyaBridge = ()=>{
+    const navigate = (to)=>{
+        window.initNavigation(to);
+    };
+    return {
+        navigate
+    };
+};
+export { useSoppiyaBridge };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import "./styles.css";
+export * from './components';
+export * from './hooks';

package/dist/index.js

@@ -0,0 +1,3 @@
+import "./styles.css";
+export * from "./components/index.js";
+export * from "./hooks/index.js";

package/dist/shared/graphql/fragment-masking.d.ts

@@ -0,0 +1,19 @@
+import type { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import type { Incremental } from './graphql';
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<infer TType, any> ? [TType] extends [{
+    ' $fragmentName'?: infer TKey;
+}] ? TKey extends string ? {
+    ' $fragmentRefs'?: {
+        [key in TKey]: TType;
+    };
+} : never : never : never;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>): TType;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | undefined): TType | undefined;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null): TType | null;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined): TType | null | undefined;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>>): Array<TType>;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined): Array<TType> | null | undefined;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>): ReadonlyArray<TType>;
+export declare function useFragment<TType>(_documentNode: DocumentTypeDecoration<TType, any>, fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined): ReadonlyArray<TType> | null | undefined;
+export declare function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT extends ResultOf<F>>(data: FT, _fragment: F): FragmentType<F>;
+export declare function isFragmentReady<TQuery, TFrag>(queryNode: DocumentTypeDecoration<TQuery, any>, fragmentNode: TypedDocumentNode<TFrag>, data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined): data is FragmentType<typeof fragmentNode>;

package/dist/shared/graphql/fragment-masking.js

@@ -0,0 +1,15 @@
+function useFragment(_documentNode, fragmentType) {
+    return fragmentType;
+}
+function makeFragmentData(data, _fragment) {
+    return data;
+}
+function isFragmentReady(queryNode, fragmentNode, data) {
+    const deferredFields = queryNode.__meta__?.deferredFields;
+    if (!deferredFields) return true;
+    const fragDef = fragmentNode.definitions[0];
+    const fragName = fragDef?.name?.value;
+    const fields = fragName && deferredFields[fragName] || [];
+    return fields.length > 0 && fields.every((field)=>data && field in data);
+}
+export { isFragmentReady, makeFragmentData, useFragment };

package/dist/shared/graphql/gql.d.ts

@@ -0,0 +1,56 @@
+import * as types from './graphql';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
+ */
+type Documents = {
+    "\n  query Medias(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $reverse: Boolean\n    $sortKey: MediaSortKeys\n    $filterKeys: MediaFilterKeys\n  ) {\n    medias(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      reverse: $reverse\n      sortKey: $sortKey\n      filterKeys: $filterKeys\n    ) {\n      edges {\n        node {\n          _id\n          file_name\n          url\n          size\n          type\n          mimetype\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n    }\n  }\n": typeof types.MediasDocument;
+    "\n  query StoragePlan {\n    plan {\n      storage\n      package {\n        _id\n        storage\n      }\n    }\n  }\n": typeof types.StoragePlanDocument;
+    "\n  query MediaUsage {\n    mediaUsage\n  }\n": typeof types.MediaUsageDocument;
+    "\n  mutation AddMedias($input: [Upload!]!) {\n    addMedias(input: $input) {\n      _id\n      file_name\n      url\n      size\n    }\n  }\n": typeof types.AddMediasDocument;
+    "\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n": typeof types.DeleteMediasDocument;
+};
+declare const documents: Documents;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export declare function graphql(source: string): unknown;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  query Medias(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $reverse: Boolean\n    $sortKey: MediaSortKeys\n    $filterKeys: MediaFilterKeys\n  ) {\n    medias(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      reverse: $reverse\n      sortKey: $sortKey\n      filterKeys: $filterKeys\n    ) {\n      edges {\n        node {\n          _id\n          file_name\n          url\n          size\n          type\n          mimetype\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n    }\n  }\n"): (typeof documents)["\n  query Medias(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $reverse: Boolean\n    $sortKey: MediaSortKeys\n    $filterKeys: MediaFilterKeys\n  ) {\n    medias(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      reverse: $reverse\n      sortKey: $sortKey\n      filterKeys: $filterKeys\n    ) {\n      edges {\n        node {\n          _id\n          file_name\n          url\n          size\n          type\n          mimetype\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  query StoragePlan {\n    plan {\n      storage\n      package {\n        _id\n        storage\n      }\n    }\n  }\n"): (typeof documents)["\n  query StoragePlan {\n    plan {\n      storage\n      package {\n        _id\n        storage\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  query MediaUsage {\n    mediaUsage\n  }\n"): (typeof documents)["\n  query MediaUsage {\n    mediaUsage\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  mutation AddMedias($input: [Upload!]!) {\n    addMedias(input: $input) {\n      _id\n      file_name\n      url\n      size\n    }\n  }\n"): (typeof documents)["\n  mutation AddMedias($input: [Upload!]!) {\n    addMedias(input: $input) {\n      _id\n      file_name\n      url\n      size\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n"): (typeof documents)["\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n"];
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
+export {};

package/dist/shared/graphql/gql.js

@@ -0,0 +1,12 @@
+import { AddMediasDocument, DeleteMediasDocument, MediaUsageDocument, MediasDocument, StoragePlanDocument } from "./graphql.js";
+const documents = {
+    "\n  query Medias(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $reverse: Boolean\n    $sortKey: MediaSortKeys\n    $filterKeys: MediaFilterKeys\n  ) {\n    medias(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      reverse: $reverse\n      sortKey: $sortKey\n      filterKeys: $filterKeys\n    ) {\n      edges {\n        node {\n          _id\n          file_name\n          url\n          size\n          type\n          mimetype\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n    }\n  }\n": MediasDocument,
+    "\n  query StoragePlan {\n    plan {\n      storage\n      package {\n        _id\n        storage\n      }\n    }\n  }\n": StoragePlanDocument,
+    "\n  query MediaUsage {\n    mediaUsage\n  }\n": MediaUsageDocument,
+    "\n  mutation AddMedias($input: [Upload!]!) {\n    addMedias(input: $input) {\n      _id\n      file_name\n      url\n      size\n    }\n  }\n": AddMediasDocument,
+    "\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n": DeleteMediasDocument
+};
+function graphql(source) {
+    return documents[source] ?? {};
+}
+export { graphql };