@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Misc/RoleplayChatWaveForm/RoleplayChatWaveForm.js

@@ -1,199 +0,0 @@
-import { Component, createRef } from "react";
-import WaveSurfer from "wavesurfer.js";
-import { encode, decode } from "base64-arraybuffer";
-import { supportsAudioType } from "../../utils/index";
-import { IconButton, Box, Card } from "@mui/material";
-import TranslateIcon from "@mui/icons-material/SwapHoriz";
-import PlayCircleIcon from "@mui/icons-material/PlayCircle";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-class RoleplayChatWaveForm extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.wavesurfer = null;
-    this.waveRef = /*#__PURE__*/createRef();
-    this.initWavesurfer = this.initWavesurfer.bind(this);
-    this.onReady = this.onReady.bind(this);
-    this.playPause = this.playPause.bind(this);
-  }
-  componentDidMount() {
-    this.initWavesurfer();
-  }
-  componentDidUpdate(prevProps) {
-    // Typical usage (don't forget to compare props):
-    if (this.props.src !== prevProps.src) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    } else if (this.props.arrayBuffer !== prevProps.arrayBuffer) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    } else if (this.props.base64 !== prevProps.base64) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    }
-  }
-  componentWillUnmount() {
-    this.wavesurfer.destroy();
-  }
-  initWavesurfer() {
-    this.wavesurfer = WaveSurfer.create({
-      backend: this.props.controls ? "MediaElement" : "WebAudio",
-      container: this.waveRef.current,
-      //waveColor: this.props.theme.palette.primary.light,
-      waveColor: "grey",
-      progressColor: "green",
-      responsive: true,
-      mediaControls: this.props.controls,
-      barWidth: 3,
-      barRadius: 3,
-      height: 50,
-      barHeight: 2,
-      cursorWidth: 0,
-      barGap: 2,
-      normalize: true
-    });
-    if (this.props.src) {
-      this.wavesurfer.load(this.props.src);
-    } else if (this.props.arrayBuffer) {
-      if (this.props.controls) {
-        const src = `data:audio/ogg;base64,${encode(this.props.arrayBuffer)}`;
-        this.wavesurfer.load(src);
-      } else {
-        this.wavesurfer.loadArrayBuffer(this.props.arrayBuffer);
-      }
-    } else if (this.props.base64) {
-      // ogg works for chrome, edge and firefox. mp3 works for safari
-      const mediaType = ["probably", "maybe"].includes(supportsAudioType("ogg")) ? "audio/ogg" : "audio/mp3";
-      if (this.props.controls) {
-        const src = `data:${mediaType};base64,${this.props.base64}`;
-        this.wavesurfer.load(src);
-      } else {
-        this.wavesurfer.loadArrayBuffer(decode(this.props.base64));
-      }
-    }
-    this.wavesurfer.on("ready", this.onReady);
-  }
-  onReady() {
-    // this.playPause();
-  }
-  playPause() {
-    this.wavesurfer.playPause();
-  }
-  render() {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: this.props.controls === false ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Card, {
-          sx: {
-            backgroundColor: "white",
-            padding: 3,
-            marginTop: 5,
-            marginRight: 5,
-            borderRadius: 25,
-            borderTopLeftRadius: this.props.isActor1 ? 0 : "auto",
-            borderTopRightRadius: this.props.isActor1 ? "auto" : 0,
-            outlineStyle: "solid",
-            outlineColor: this.props.theme.palette.primary.main,
-            outlineWidth: "thin",
-            textAlign: "center",
-            color: this.props.theme.palette.primary.main,
-            maxHeight: 40,
-            display: "flex",
-            justifyContent: "center",
-            flexDirection: "column"
-          },
-          children: /*#__PURE__*/_jsx(Box, {
-            sx: {
-              minWidth: 100,
-              m: 0,
-              p: 0
-            },
-            children: /*#__PURE__*/_jsx("div", {
-              className: "wave",
-              ref: this.waveRef,
-              onClick: this.playPause
-            })
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "flex",
-            marginTop: this.props.theme.spacing(1),
-            justifyContent: this.props.isActor1 ? "flex-start" : "flex-end",
-            color: this.props.theme.palette.text.secondary
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            children: this.props.isActor1 ? /*#__PURE__*/_jsxs(Box, {
-              children: [/*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  color: "inherit",
-                  disabled: !this.props.handleSpeak,
-                  onClick: this.playPause,
-                  size: "small",
-                  "aria-label": "Play",
-                  children: /*#__PURE__*/_jsx(PlayCircleIcon, {
-                    fontSize: "inherit"
-                  })
-                })
-              }), /*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  color: "inherit",
-                  onClick: this.props.translate,
-                  size: "small",
-                  sx: {
-                    display: !this.props.isTextMessage ? "none" : "auto"
-                  },
-                  disabled: !this.props.handleTranslate || this.props.disableTranslation || !this.props.isTextMessage,
-                  "aria-label": "Translate",
-                  children: /*#__PURE__*/_jsx(TranslateIcon, {
-                    fontSize: "inherit"
-                  })
-                })
-              })]
-            }) : /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                mr: 2
-              },
-              children: [/*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  color: "inherit",
-                  onClick: this.props.translate,
-                  size: "small",
-                  sx: {
-                    display: !this.props.isTextMessage ? "none" : "auto"
-                  },
-                  disabled: !this.props.handleTranslate || this.props.disableTranslation || !this.props.isTextMessage,
-                  "aria-label": "Translate",
-                  children: /*#__PURE__*/_jsx(TranslateIcon, {
-                    fontSize: "inherit"
-                  })
-                })
-              }), /*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  color: "inherit",
-                  disabled: !this.props.handleSpeak,
-                  onClick: this.playPause,
-                  size: "small",
-                  "aria-label": "Play",
-                  children: /*#__PURE__*/_jsx(PlayCircleIcon, {
-                    fontSize: "inherit"
-                  })
-                })
-              })]
-            })
-          })
-        })]
-      }) : /*#__PURE__*/_jsx(Box, {
-        sx: {
-          minWidth: 100,
-          m: 0,
-          p: 0
-        },
-        children: /*#__PURE__*/_jsx("div", {
-          className: "wave",
-          ref: this.waveRef,
-          onClick: this.playPause
-        })
-      })
-    });
-  }
-}
-export default RoleplayChatWaveForm;

package/dist/Misc/RoleplayChatWaveForm/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "RoleplayChatWaveForm",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./RoleplayChatWaveForm.js"
-}

package/dist/Misc/RoleplayWaveform/RoleplayWaveform.js

@@ -1,95 +0,0 @@
-import { Component, createRef } from "react";
-import WaveSurfer from "wavesurfer.js";
-import { encode, decode } from "base64-arraybuffer";
-import { supportsAudioType } from "../../utils/index";
-import { Box } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-class RoleplayWaveform extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.wavesurfer = null;
-    this.waveRef = /*#__PURE__*/createRef();
-    this.initWavesurfer = this.initWavesurfer.bind(this);
-    this.onReady = this.onReady.bind(this);
-    this.playPause = this.playPause.bind(this);
-  }
-  componentDidMount() {
-    this.initWavesurfer();
-  }
-  componentDidUpdate(prevProps) {
-    // Typical usage (don't forget to compare props):
-    if (this.props.src !== prevProps.src) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    } else if (this.props.arrayBuffer !== prevProps.arrayBuffer) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    } else if (this.props.base64 !== prevProps.base64) {
-      this.wavesurfer.destroy();
-      this.initWavesurfer();
-    }
-  }
-  componentWillUnmount() {
-    this.wavesurfer.destroy();
-  }
-  initWavesurfer() {
-    this.wavesurfer = WaveSurfer.create({
-      backend: this.props.controls ? "MediaElement" : "WebAudio",
-      container: this.waveRef.current,
-      //waveColor: this.props.theme.palette.primary.light,
-      waveColor: "grey",
-      progressColor: "green",
-      responsive: true,
-      mediaControls: this.props.controls,
-      barWidth: 3,
-      barRadius: 3,
-      height: 50,
-      barHeight: 2,
-      cursorWidth: 0,
-      barGap: 2,
-      normalize: true
-    });
-    if (this.props.src) {
-      this.wavesurfer.load(this.props.src);
-    } else if (this.props.arrayBuffer) {
-      if (this.props.controls) {
-        const src = `data:audio/ogg;base64,${encode(this.props.arrayBuffer)}`;
-        this.wavesurfer.load(src);
-      } else {
-        this.wavesurfer.loadArrayBuffer(this.props.arrayBuffer);
-      }
-    } else if (this.props.base64) {
-      // ogg works for chrome, edge and firefox. mp3 works for safari
-      const mediaType = ["probably", "maybe"].includes(supportsAudioType("ogg")) ? "audio/ogg" : "audio/mp3";
-      if (this.props.controls) {
-        const src = `data:${mediaType};base64,${this.props.base64}`;
-        this.wavesurfer.load(src);
-      } else {
-        this.wavesurfer.loadArrayBuffer(decode(this.props.base64));
-      }
-    }
-    this.wavesurfer.on("ready", this.onReady);
-  }
-  onReady() {
-    // this.playPause();
-  }
-  playPause() {
-    this.wavesurfer.playPause();
-  }
-  render() {
-    return /*#__PURE__*/_jsx(Box, {
-      sx: {
-        minWidth: 100,
-        m: 0,
-        p: 0
-      },
-      children: /*#__PURE__*/_jsx("div", {
-        className: "wave",
-        ref: this.waveRef,
-        onClick: this.playPause
-      })
-    });
-  }
-}
-export default RoleplayWaveform;

package/dist/Misc/RoleplayWaveform/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "RoleplayWaveform",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./RoleplayWaveform.js"
-}

package/dist/Misc/RubyText/RubyText.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function RubyText({
-  segments
-}) {
-  if (!segments) return null;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: segments.map((seg, i) => seg.phonetic ? /*#__PURE__*/_jsxs("ruby", {
-      style: {
-        rubyAlign: "center"
-      },
-      children: [seg.text, /*#__PURE__*/_jsx("rp", {
-        children: "("
-      }), /*#__PURE__*/_jsx("rt", {
-        style: {
-          fontSize: "0.6em",
-          opacity: 0.75
-        },
-        children: seg.phonetic
-      }), /*#__PURE__*/_jsx("rp", {
-        children: ")"
-      })]
-    }, i) : /*#__PURE__*/_jsx("span", {
-      children: seg.text
-    }, i))
-  });
-}
-export default RubyText;

package/dist/Misc/ShareButton/ShareButton.js

@@ -1,69 +0,0 @@
-import { useState } from "react";
-import ShareIcon from "@mui/icons-material/Share";
-import UpgradeSubscription from "../../Dialogs/UpgradeSubscription/UpgradeSubscription";
-import ShareDrawer from "./ShareDrawer";
-import Button from "./../DefaultColourButton/DefaultColourButton";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-function ShareButton({
-  t = text => text,
-  id = "share-button",
-  title = null,
-  url = null,
-  disabled = false,
-  className = {},
-  mainSiteUrl,
-  subscription = {
-    isUpgradePossible: true
-  },
-  trackRecommendedEvent,
-  itemId,
-  contentType
-}) {
-  const [isShareDrawerOpen, setIsShareDrawerOpen] = useState(false);
-  const [isUpgradeSubscriptionOpen, setIsUpgradeSubscriptionOpen] = useState(false);
-  const handleOpenUpgradeSubscriptionModal = () => {
-    setIsUpgradeSubscriptionOpen(true);
-  };
-  const handleCloseUpgradeSubcriptionModal = () => {
-    setIsUpgradeSubscriptionOpen(false);
-  };
-  const handleSubscriptionPage = () => {
-    window.open(`${mainSiteUrl}/pricing/app`, "_blank");
-  };
-  const handleClick = () => {
-    if (subscription.isPaidUser) {
-      setIsShareDrawerOpen(true);
-    } else {
-      handleOpenUpgradeSubscriptionModal();
-    }
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Button, {
-      variant: "contained",
-      startIcon: /*#__PURE__*/_jsx(ShareIcon, {}),
-      size: "small",
-      onClick: handleClick,
-      disabled: disabled,
-      className: className,
-      id: id,
-      children: t("share")
-    }), /*#__PURE__*/_jsx(ShareDrawer, {
-      t: t,
-      title: title,
-      url: url,
-      open: isShareDrawerOpen,
-      handleClose: () => setIsShareDrawerOpen(false),
-      subscription: subscription,
-      trackRecommendedEvent: trackRecommendedEvent,
-      itemId: itemId,
-      contentType: contentType
-    }), /*#__PURE__*/_jsx(UpgradeSubscription, {
-      t: t,
-      open: isUpgradeSubscriptionOpen,
-      handleClose: handleCloseUpgradeSubcriptionModal,
-      onConfirm: handleSubscriptionPage,
-      subscription: subscription
-    }, "UpgradeSubscription")]
-  });
-}
-export default ShareButton;

package/dist/Misc/ShareButton/ShareDrawer.js

@@ -1,241 +0,0 @@
-import { useState, useEffect } from "react";
-import CopyIcon from "@mui/icons-material/FileCopy";
-import ShareIcon from "@mui/icons-material/Share";
-import { Drawer, List, ListSubheader, ListItem, ListItemAvatar, ListItemText, Avatar, Tooltip, IconButton, ListItemButton } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import { Facebook, Twitter } from "react-feather";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import GoogleClassroomIcon from "../../img/google-classroom.svg";
-import UpgradeSubscription from "../../Dialogs/UpgradeSubscription/UpgradeSubscription";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  facebook: {
-    backgroundColor: "#3b5999"
-  },
-  twitter: {
-    backgroundColor: "#55acee"
-  },
-  linkedin: {
-    backgroundColor: "#0077B5"
-  },
-  classroom: {
-    backgroundColor: "#f4b400"
-  }
-});
-function ShareDrawer({
-  t = text => text,
-  title,
-  url = null,
-  open,
-  handleClose,
-  subscription = {
-    isUpgradePossible: true
-  },
-  mainSiteUrl,
-  trackRecommendedEvent = () => {},
-  itemId,
-  contentType
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [facebookLink, setFacebookLink] = useState("");
-  const [twitterLink, setTwitterLink] = useState("");
-  const [, setLinkedinLink] = useState("");
-  const [googleClassroomLink, setGoogleClassroomLink] = useState("");
-  const [copied, setCopied] = useState(false);
-  const [isUpgradeSubscriptionOpen, setIsUpgradeSubscriptionOpen] = useState(false);
-  const handleOpenUpgradeSubscriptionModal = () => {
-    setIsUpgradeSubscriptionOpen(true);
-  };
-  const handleCloseUpgradeSubscriptionModal = () => {
-    setIsUpgradeSubscriptionOpen(false);
-  };
-  const handleSubscriptionPage = () => {
-    window.open(`${mainSiteUrl}/pricing/app`, "_blank");
-  };
-  useEffect(() => {
-    if (url) {
-      setFacebookLink(`https://www.facebook.com/sharer.php?u=${url}`);
-      setTwitterLink(`https://twitter.com/intent/tweet?url=${url}`);
-      setLinkedinLink(`https://www.linkedin.com/shareArticle?mini=true&url=${url}`);
-      setLinkedinLink(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`);
-      setGoogleClassroomLink(`https://classroom.google.com/share?url=${url}`);
-    }
-  }, [url]);
-  useEffect(() => {
-    if (open) {
-      setCopied(false);
-    }
-  }, [open]);
-  const shareEventParams = {
-    method: null,
-    content_type: contentType,
-    item_id: itemId
-  };
-  function openWindow(url) {
-    if (url === googleClassroomLink) {
-      trackRecommendedEvent("share", {
-        ...shareEventParams,
-        method: "GoogleClassroom"
-      });
-    } else if (url === facebookLink) {
-      trackRecommendedEvent("share", {
-        ...shareEventParams,
-        method: "Facebook"
-      });
-    } else if (url === twitterLink) {
-      trackRecommendedEvent("share", {
-        ...shareEventParams,
-        method: "Twitter"
-      });
-    } else if (url.startsWith("mailto")) {
-      trackRecommendedEvent("share", {
-        ...shareEventParams,
-        method: "Email"
-      });
-    }
-    window.open(url);
-  }
-  const handleWebShare = async () => {
-    if (navigator.share) {
-      try {
-        trackRecommendedEvent("share", {
-          ...shareEventParams,
-          method: "WebShareAPI"
-        });
-        await navigator.share({
-          title: title,
-          url: url
-        });
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  };
-  return /*#__PURE__*/_jsxs(Drawer, {
-    anchor: "bottom",
-    open: open,
-    onClose: handleClose,
-    sx: {
-      zIndex: 1400
-    },
-    children: [/*#__PURE__*/_jsxs(List, {
-      subheader: /*#__PURE__*/_jsx(ListSubheader, {
-        component: "div",
-        children: t("share_via")
-      }),
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: t("close_drawer"),
-        placement: "bottom",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: handleClose,
-          sx: {
-            position: "absolute",
-            top: 6,
-            right: 10,
-            zIndex: 1
-          },
-          children: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {})
-        })
-      }), /*#__PURE__*/_jsxs(ListItemButton, {
-        onClick: () => openWindow(facebookLink),
-        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            variant: "rounded",
-            className: classes.facebook,
-            alt: "",
-            children: /*#__PURE__*/_jsx(Facebook, {
-              color: "#fff",
-              fill: "#fff"
-            })
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: "Facebook"
-        })]
-      }), /*#__PURE__*/_jsxs(ListItemButton, {
-        onClick: () => openWindow(twitterLink),
-        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            variant: "rounded",
-            className: classes.twitter,
-            alt: "",
-            children: /*#__PURE__*/_jsx(Twitter, {
-              color: "#fff",
-              fill: "#fff"
-            })
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: "Twitter"
-        })]
-      }), !subscription?.isPaidUser && /*#__PURE__*/_jsxs(ListItemButton, {
-        onClick: () => handleOpenUpgradeSubscriptionModal(),
-        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            variant: "rounded",
-            className: classes.classroom,
-            alt: "",
-            children: /*#__PURE__*/_jsx("img", {
-              src: GoogleClassroomIcon,
-              alt: "Google Classroom Icon"
-            })
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: "Google Classroom"
-        })]
-      }), subscription?.isPaidUser && /*#__PURE__*/_jsxs(ListItemButton, {
-        onClick: () => openWindow(googleClassroomLink),
-        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            variant: "rounded",
-            className: classes.classroom,
-            alt: "",
-            children: /*#__PURE__*/_jsx("img", {
-              src: GoogleClassroomIcon,
-              alt: "Google Classroom Icon"
-            })
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: "Google Classroom"
-        })]
-      }), /*#__PURE__*/_jsx(CopyToClipboard, {
-        text: url,
-        onCopy: () => {
-          setCopied(true);
-          trackRecommendedEvent("share", {
-            ...shareEventParams,
-            method: "CopyToClipboard"
-          });
-        },
-        children: /*#__PURE__*/_jsxs(ListItemButton, {
-          children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-            children: /*#__PURE__*/_jsx(Avatar, {
-              alt: "",
-              children: /*#__PURE__*/_jsx(CopyIcon, {})
-            })
-          }), /*#__PURE__*/_jsx(ListItemText, {
-            primary: copied ? t("copied") : `${t("copy_to_clipboard")} - ${url}`
-          })]
-        })
-      }), navigator.share && /*#__PURE__*/_jsxs(ListItemButton, {
-        onClick: handleWebShare,
-        children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            alt: "",
-            children: /*#__PURE__*/_jsx(ShareIcon, {})
-          })
-        }), /*#__PURE__*/_jsx(ListItemText, {
-          primary: t("more_options")
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(UpgradeSubscription, {
-      t: t,
-      open: isUpgradeSubscriptionOpen,
-      handleClose: handleCloseUpgradeSubscriptionModal,
-      onConfirm: handleSubscriptionPage,
-      subscription: subscription
-    }, "UpgradeSubscription")]
-  });
-}
-export default ShareDrawer;

package/dist/Misc/ShareButton/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "ShareButton",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./ShareButton.js"
-}