feat: suggestions, and updates

package.json

@@ -9,8 +9,9 @@
     "@types/node": "^20.3.1",
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.7",
+    "styled-components": "6.1.13",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "bigbluebutton-html-plugin-sdk": "0.0.53",
+    "bigbluebutton-html-plugin-sdk": "0.0.58",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -63,7 +64,6 @@
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.3",
     "typescript": "^5.1.6",
-    "watch": "^1.0.2",
     "webpack": "^5.83.1",
     "webpack-cli": "^5.1.1",
     "webpack-dev-server": "^4.15.1"

src/components/generic-link-share/component.tsx

@@ -21,6 +21,7 @@ import GenericComponentLinkShare from '../generic-component/component';
 import { DataToGenericLink, DecreaseVolumeOnSpeakProps } from './types';
 import { ModalToShareLink } from '../modal-to-share-link/component';
 import { LinkTag } from '../modal-to-share-link/types';
+import { REGEX } from './constants';
 
 function GenericLinkShare(
   { pluginUuid: uuid }: DecreaseVolumeOnSpeakProps,
@@ -85,6 +86,7 @@ function GenericLinkShare(
         new PresentationToolbarButton({
           label: `Play ${tag.title}`,
           tooltip: 'A generic link tag has been detected in this slide, show it to all?',
+          style: {},
           onClick: () => {
             deleteEntryUrlToGenericLink([RESET_DATA_CHANNEL]);
             pushEntryUrlToGenericLink({
@@ -123,12 +125,11 @@ function GenericLinkShare(
   const handleSendLinkToIframe = (e: React.SyntheticEvent) => {
     e.preventDefault();
     let objectToDispatch: DataToGenericLink;
-    const regex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])/g;
     if (previousModalState.isUrlSameForRole) {
       const target = e.target as typeof e.target & {
         link: { value: string };
       };
-      if (target.link.value.match(regex)) {
+      if (target.link.value.match(REGEX)) {
         objectToDispatch = {
           isUrlSameForRole: true,
           url: target.link.value,
@@ -139,7 +140,7 @@ function GenericLinkShare(
         link: { value: string };
         viewerLink: { value?: string };
       };
-      if (target.link.value.match(regex)) {
+      if (target.link.value.match(REGEX)) {
         objectToDispatch = {
           isUrlSameForRole: false,
           url: target.link.value,
@@ -156,6 +157,7 @@ function GenericLinkShare(
     }
   };
 
+  // Receiving URL data and persisting it to be inserted in the iframe later on
   useEffect(() => {
     if (
       urlToGenericLink.data
@@ -199,6 +201,7 @@ function GenericLinkShare(
     }
   }, [urlToGenericLink, currentUser]);
 
+  // Set extensible areas (depending o the role of the user)
   useEffect(() => {
     if (currentUser?.presenter) {
       const actionDropdownItemsToRender = [
@@ -216,7 +219,7 @@ function GenericLinkShare(
         }));
       }
       actionDropdownItemsToRender.push(new ActionButtonDropdownOption({
-        label: showingPresentationContent ? 'Remove link share' : 'Share link',
+        label: showingPresentationContent ? 'Remove link share' : 'Share Website Link as Content',
         icon: 'copy',
         tooltip: showingPresentationContent ? 'Remove generic link from presentation area'
           : 'Share a generic link into the presentation area',
@@ -242,11 +245,9 @@ function GenericLinkShare(
           contentFunction: (element: HTMLElement) => {
             const root = ReactDOM.createRoot(element);
             root.render(
-              <React.StrictMode>
-                <GenericComponentLinkShare
-                  link={link}
-                />
-              </React.StrictMode>,
+              <GenericComponentLinkShare
+                link={link}
+              />,
             );
           },
         }),
@@ -255,7 +256,6 @@ function GenericLinkShare(
       pluginApi.setGenericContentItems([]);
     }
   }, [link]);
-
   return (
     <ModalToShareLink
       {...{

src/components/generic-link-share/constants.ts

@@ -0,0 +1 @@
+export const REGEX = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])/g;

src/components/modal-to-share-link/component.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
-import * as ReactModal from 'react-modal';
+import { useEffect, useState } from 'react';
+
+import * as Styled from './styles';
 
-import './style.css';
 import { ModalToShareLinkProps } from './types';
+import { REGEX } from '../generic-link-share/constants';
+import { LinkForm } from './link-form/component';
 
 export function ModalToShareLink(props: ModalToShareLinkProps) {
   const {
@@ -16,119 +19,86 @@ export function ModalToShareLink(props: ModalToShareLinkProps) {
     setLinkError,
   } = props;
 
+  const [isUrlAlreadyFormated, setIsUrlAlreadyFormated] = useState<boolean>(false);
+  const [isViewerUrlAlreadyFormated, setIsViewerUrlAlreadyFormated] = useState<boolean>();
+
   const {
-    isUrlSameForRole = true,
     url: incomingUrl,
     viewerUrl: incomingViewerUrl,
   } = previousModalState;
+
   const url = incomingUrl || '';
   const viewerUrl = incomingViewerUrl || '';
+
+  useEffect(() => {
+    if (url.match(REGEX)) {
+      setIsUrlAlreadyFormated(true);
+    } else setIsUrlAlreadyFormated(false);
+    if (viewerUrl.match(REGEX)) {
+      setIsViewerUrlAlreadyFormated(true);
+    } else setIsViewerUrlAlreadyFormated(false);
+  }, [previousModalState]);
+
   return (
-    <ReactModal
-      className="plugin-modal"
-      overlayClassName="modal-overlay"
+    <Styled.PluginModal
+      className="modal-high"
+      overlayClassName="modalOverlay"
+      ariaHideApp={false}
       isOpen={showModal}
       onRequestClose={handleCloseModal}
     >
+      <Styled.ClickableClose
+        type="button"
+        onClick={() => {
+          handleCloseModal();
+        }}
+      >
+        <i className="icon-bbb-close" />
+      </Styled.ClickableClose>
       <div
         style={{
-          width: '100%', height: '100%', alignItems: 'flex-start', display: 'flex', flexDirection: 'column',
+          width: '100%',
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          display: 'flex',
         }}
       >
-        {
-          !linkError
-            ? (
-              <>
-                <button
-                  type="button"
-                  className="clickable-close"
-                  onClick={() => {
-                    handleCloseModal();
-                  }}
-                >
-                  <i
-                    className="icon-bbb-close"
-                  />
-                </button>
-                <h1>Share your link</h1>
-                <form
-                  className="form-to-send-url"
-                  onSubmit={handleSendLinkToIframe}
-                >
-                  <label
-                    className="form-to-send-url-item form-checkbox-item"
-                    htmlFor="same-links-for-pres-viewer"
-                  >
-                    <input
-                      id="same-links-for-pres-viewer"
-                      type="checkbox"
-                      name="isUrlSameForRole"
-                      checked={isUrlSameForRole}
-                      onChange={handleCheckboxChange}
-                    />
-                    <span className="label-form label-form-checkbox">Same URL for presenter and viewer</span>
-                  </label>
-                  <label
-                    htmlFor="link-receiver"
-                    className="form-to-send-url-item"
-                  >
-                    <span className="label-form">{isUrlSameForRole ? 'URL: ' : 'Presenter Url: '}</span>
-                    <input
-                      className="label-form-text-input"
-                      id="link-receiver"
-                      value={url}
-                      type="text"
-                      name="link"
-                      placeholder="https://..."
-                      onChange={(e) => {
-                        setPreviousModalState((p) => ({
-                          isUrlSameForRole: p?.isUrlSameForRole,
-                          url: e?.target?.value,
-                          viewerUrl: p?.viewerUrl,
-                        }));
-                      }}
-                    />
-                  </label>
-                  {
-                    !isUrlSameForRole
-                      ? (
-                        <label
-                          htmlFor="extra-link-receiver"
-                          className="form-to-send-url-item"
-                        >
-                          <span className="label-form">Viewer URL (It can be set later on): </span>
-                          <input
-                            className="label-form-text-input"
-                            id="extra-link-receiver"
-                            value={viewerUrl}
-                            type="text"
-                            name="viewerLink"
-                            placeholder="https://..."
-                            onChange={(e) => {
-                              setPreviousModalState((p) => ({
-                                isUrlSameForRole: p?.isUrlSameForRole,
-                                url: p?.url,
-                                viewerUrl: e?.target?.value,
-                              }));
-                            }}
-                          />
-                        </label>
-                      ) : null
-                  }
-                  <input className="button-style sending-button" type="submit" value="Send" />
-                </form>
-              </>
-            ) : (
-              <div>
-                <h1>Error: </h1>
-                <div className="error-content-block">
-                  <span className="error-span">{linkError}</span>
-                  <button type="button" className="button-style" onClick={() => { setLinkError(null); }}>clear</button>
-                </div>
-              </div>
-            )
-        }
+        <h1 style={{ margin: '5px 0' }}>Share your link</h1>
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyItems: 'center',
+          }}
+        >
+          {!linkError ? (
+            <LinkForm
+              previousModalState={previousModalState}
+              setPreviousModalState={setPreviousModalState}
+              handleCloseModal={handleCloseModal}
+              handleSendLinkToIframe={handleSendLinkToIframe}
+              handleCheckboxChange={handleCheckboxChange}
+              isUrlAlreadyFormated={isUrlAlreadyFormated}
+              isViewerUrlAlreadyFormated={isViewerUrlAlreadyFormated}
+            />
+          ) : (
+            <div>
+              <h1>Error: </h1>
+              <Styled.ErrorContentBlock>
+                <Styled.ErrorSpan>{linkError}</Styled.ErrorSpan>
+                <Styled.ButtonStyle onClick={() => setLinkError(null)}>
+                  clear
+                </Styled.ButtonStyle>
+              </Styled.ErrorContentBlock>
+            </div>
+          )}
+        </div>
       </div>
-    </ReactModal>
+    </Styled.PluginModal>
   );
 }

src/components/modal-to-share-link/link-form/checkbox-input/component.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as Styled from './styles';
+import { CheckboxInputComponentProps } from './types';
+
+export function CheckboxInputComponent(props: CheckboxInputComponentProps) {
+  const {
+    isUrlSameForRole,
+    handleCheckboxChange,
+  } = props;
+  return (
+    <Styled.FormToSendUrlItem isCheckboxItem as="label" htmlFor="same-links-for-pres-viewer">
+      <input
+        id="same-links-for-pres-viewer"
+        type="checkbox"
+        name="isUrlSameForRole"
+        checked={isUrlSameForRole}
+        onChange={handleCheckboxChange}
+      />
+      <Styled.LabelFormCheckbox>
+        Same URL for presenter and viewers
+      </Styled.LabelFormCheckbox>
+    </Styled.FormToSendUrlItem>
+  );
+}

src/components/modal-to-share-link/link-form/checkbox-input/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { FormToSendUrlItem as FormToSendUrlItemCommon } from '../styles';
+
+export const FormToSendUrlItem = styled(FormToSendUrlItemCommon)``;
+
+export const LabelFormCheckbox = styled.span`
+  margin-left: 10px;
+`;

src/components/modal-to-share-link/link-form/checkbox-input/types.ts

@@ -0,0 +1,4 @@
+export interface CheckboxInputComponentProps {
+  isUrlSameForRole: boolean;
+  handleCheckboxChange: () => void;
+}