Embed - tiny code migrated to react / Share button in the room settings added.

Author: JasminDreasond

info/dev/preparing-changelog.md

@@ -5,3 +5,4 @@
 - Force Dev Mode option added into the `.env` file.
 - New room viewer script to mobile.
 - Mobile css content place fixed.
+- Share button in the room settings added.

src/app/molecules/dialog/Dialog.jsx

@@ -13,7 +13,7 @@ function Dialog({
   onAfterOpen = null,
   onAfterClose = null,
   onRequestClose = null,
-  children,
+  children = null,
   bodyClass = '',
 }) {
   useEffect(() => {
@@ -57,7 +57,7 @@ Dialog.propTypes = {
   onAfterOpen: PropTypes.func,
   onAfterClose: PropTypes.func,
   onRequestClose: PropTypes.func,
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export default Dialog;

src/app/molecules/message/Embed.jsx

@@ -23,6 +23,7 @@ function Embed({ embed = {}, roomId = null, threadId = null }) {
   // URL Ref
   const tinyUrl = useRef(null);
   const itemEmbed = useRef(null);
+  const [useVideo, setUseVideo] = useState(false);
   const [embedHeight, setEmbedHeight] = useState(null);
 
   const imgType =
@@ -196,26 +197,33 @@ function Embed({ embed = {}, roomId = null, threadId = null }) {
           ) : null}
 
           {isVideo && typeof imgUrl === 'string' && imgUrl.length > 0 ? (
-            <div
-              className="mt-2 ratio ratio-16x9 embed-video"
-              style={{
-                backgroundImage: `url('${imgUrl !== defaultVideoAvatar ? mx.mxcUrlToHttp(imgUrl, 2000, 2000) : defaultVideoAvatar}')`,
-              }}
-              onClick={(e) => {
-                $(e.target).replaceWith(
-                  jReact(
-                    <div className="mt-2 ratio ratio-16x9 embed-video enabled">
-                      <embed title={String(embed['og:title'])} src={videoUrl} allowfullscreen="" />
-                    </div>,
-                  ),
-                );
-              }}
-            >
+            !useVideo ? (
               <div
-                className="play-button w-100 h-100"
-                style={{ backgroundImage: `url('./img/svg/play-circle-fill.svg')` }}
-              />
-            </div>
+                className="mt-2 ratio ratio-16x9 embed-video"
+                style={{
+                  backgroundImage: `url('${imgUrl !== defaultVideoAvatar ? mx.mxcUrlToHttp(imgUrl, 2000, 2000) : defaultVideoAvatar}')`,
+                }}
+                onClick={() => {
+                  setUseVideo(true);
+                }}
+              >
+                <div
+                  className="play-button w-100 h-100"
+                  style={{ backgroundImage: `url('./img/svg/play-circle-fill.svg')` }}
+                />
+              </div>
+            ) : (
+              <div className="mt-2 ratio ratio-16x9 embed-video enabled">
+                <iframe
+                  title={String(embed['og:title'])}
+                  src={videoUrl}
+                  allowFullScreen
+                  frameborder="0"
+                  webkitallowfullscreen="true"
+                  mozallowfullscreen="true"
+                />
+              </div>
+            )
           ) : null}
         </span>
       </div>

src/app/molecules/room-profile/RoomProfile.jsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import tinyClipboard from '@src/util/libs/Clipboard';
+import { getShareUrl } from '@src/util/tools';
 
 import { twemojifyReact } from '../../../util/twemojify';
 
@@ -293,50 +295,71 @@ function RoomProfile({ roomId, isSpace }) {
   );
 
   // Render Panel
-  const renderNameAndTopic = () => (
-    <div
-      className="emoji-size-fix"
-      style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}
-    >
-      <div>
-        <h4 className="d-inline-block m-0 my-1">{twemojifyReact(roomName)}</h4>
-
-        {nameCinny.category.length > 0 && (
-          <div className="d-inline-block m-0 my-1">
-            <span style={{ marginRight: '8px', marginLeft: '18px' }}>
-              <RawIcon fa="fa-solid fa-grip-lines-vertical" />
-            </span>
-            <span>{twemojifyReact(nameCinny.category)}</span>
-          </div>
-        )}
+  const renderNameAndTopic = () => {
+    const isAlias = typeof room.getCanonicalAlias() === 'string';
+    const roomId = room.getCanonicalAlias() || room.roomId;
+    return (
+      <div
+        className="emoji-size-fix"
+        style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}
+      >
+        <div>
+          <h4 className="d-inline-block m-0 my-1">{twemojifyReact(roomName)}</h4>
+
+          {nameCinny.category.length > 0 && (
+            <div className="d-inline-block m-0 my-1">
+              <span style={{ marginRight: '8px', marginLeft: '18px' }}>
+                <RawIcon fa="fa-solid fa-grip-lines-vertical" />
+              </span>
+              <span>{twemojifyReact(nameCinny.category)}</span>
+            </div>
+          )}
 
-        {nameCinny.index.length > 0 && (
-          <div className="d-inline-block m-0 my-1">
-            <span style={{ marginRight: '8px', marginLeft: '8px' }}>
-              <RawIcon fa="fa-solid fa-grip-lines-vertical" />
-            </span>
-            <span>{twemojifyReact(nameCinny.index)}</span>
-          </div>
-        )}
+          {nameCinny.index.length > 0 && (
+            <div className="d-inline-block m-0 my-1">
+              <span style={{ marginRight: '8px', marginLeft: '8px' }}>
+                <RawIcon fa="fa-solid fa-grip-lines-vertical" />
+              </span>
+              <span>{twemojifyReact(nameCinny.index)}</span>
+            </div>
+          )}
 
-        <span> </span>
+          <span> </span>
 
-        {(canChangeName || canChangeTopic) && (
-          <IconButton
-            fa="fa-solid fa-pencil"
-            size="extra-small"
-            tooltip="Edit"
-            onClick={() => setIsEditing(true)}
-          />
+          {(canChangeName || canChangeTopic) && (
+            <IconButton
+              fa="fa-solid fa-pencil"
+              size="extra-small"
+              tooltip="Edit"
+              onClick={() => setIsEditing(true)}
+            />
+          )}
+        </div>
+
+        <div className="very-small text-gray">
+          {roomId}
+          {isAlias ? (
+            <a
+              className="ms-1 badge bg-primary text-bg-force noselect"
+              href="#"
+              onClick={(event) => {
+                event.preventDefault();
+                tinyClipboard.copyText(getShareUrl(roomId));
+                alert('The share link was successfully copied!', 'Room Viewer');
+              }}
+            >
+              Share
+            </a>
+          ) : null}
+        </div>
+        {roomTopic && (
+          <div className="very-small text-freedom">
+            {twemojifyReact(roomTopic, undefined, true)}
+          </div>
         )}
       </div>
-
-      <div className="very-small text-gray">{room.getCanonicalAlias() || room.roomId}</div>
-      {roomTopic && (
-        <div className="very-small text-freedom">{twemojifyReact(roomTopic, undefined, true)}</div>
-      )}
-    </div>
-  );
+    );
+  };
 
   // Complete
   return (