feat: add a target description to OneClickEmbedding

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>

locales/en.json

@@ -28,6 +28,9 @@
             "png": "Save as PNG",
             "svg": "Save as SVG",
             "errorJson": "Error parsing the JSON"
+        },
+        "one-click-embedding": {
+          "previewHoverText": "Click to load content from {{target}}"
         }
     },
     "landing": {

src/components/markdown-renderer/replace-components/asciinema/asciinema-frame.tsx

@@ -14,6 +14,7 @@ export const AsciinemaFrame: React.FC<IdProps> = ({ id }) => {
       containerClassName={'embed-responsive embed-responsive-16by9'}
       previewContainerClassName={'embed-responsive-item'}
       hoverIcon={'play'}
+      targetDescription={'asciinema'}
       loadingImageUrl={`https://asciinema.org/a/${id}.png`}>
       <iframe
         className='embed-responsive-item'

src/components/markdown-renderer/replace-components/gist/gist-frame.tsx

@@ -28,7 +28,11 @@ export const GistFrame: React.FC<IdProps> = ({ id }) => {
   )
 
   return (
-    <OneClickEmbedding previewContainerClassName={'gist-frame'} loadingImageUrl={preview} hoverIcon={'github'}>
+    <OneClickEmbedding
+      previewContainerClassName={'gist-frame'}
+      loadingImageUrl={preview}
+      hoverIcon={'github'}
+      targetDescription={'GitHub Gist'}>
       <iframe
         sandbox=''
         {...cypressId('gh-gist')}

src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
-import { Trans } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import type { IconName } from '../../../common/fork-awesome/types'
 import { ShowIf } from '../../../common/show-if/show-if'
 import './one-click-embedding.scss'
@@ -19,7 +19,7 @@ interface OneClickFrameProps {
   loadingImageUrl?: string
   hoverIcon?: IconName
   hoverTextI18nKey?: string
-  tooltip?: string
+  targetDescription?: string
   containerClassName?: string
   previewContainerClassName?: string
   onActivate?: () => void
@@ -31,13 +31,13 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({
   onImageFetch,
   loadingImageUrl,
   children,
-  tooltip,
+  targetDescription,
   hoverIcon,
-  hoverTextI18nKey,
   onActivate
 }) => {
   const [showFrame, setShowFrame] = useState(false)
   const [previewImageUrl, setPreviewImageUrl] = useState(loadingImageUrl)
+  const { t } = useTranslation()
 
   const showChildren = () => {
     setShowFrame(true)
@@ -59,6 +59,10 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({
       })
   }, [onImageFetch])
 
+  const previewHoverText = useMemo(() => {
+    return targetDescription ? t('renderer.one-click-embedding.previewHoverText', { target: targetDescription }) : ''
+  }, [t, targetDescription])
+
   return (
     <span className={containerClassName}>
       <ShowIf condition={showFrame}>{children}</ShowIf>
@@ -68,17 +72,13 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({
             <ProxyImageFrame
               className={'one-click-embedding-preview'}
               src={previewImageUrl}
-              alt={tooltip || ''}
+              alt={previewHoverText}
-              title={tooltip || ''}
+              title={previewHoverText}
             />
           </ShowIf>
           <ShowIf condition={!!hoverIcon}>
             <span className='one-click-embedding-icon text-center'>
               <i className={`fa fa-${hoverIcon as string} fa-5x mb-2`} />
-              <ShowIf condition={!!hoverTextI18nKey}>
-                <br />
-                <Trans i18nKey={hoverTextI18nKey} />
-              </ShowIf>
             </span>
           </ShowIf>
         </span>

src/components/markdown-renderer/replace-components/vimeo/vimeo-frame.tsx

@@ -38,6 +38,7 @@ export const VimeoFrame: React.FC<IdProps> = ({ id }) => {
       previewContainerClassName={'embed-responsive-item'}
       loadingImageUrl={'https://i.vimeocdn.com/video/'}
       hoverIcon={'vimeo-square'}
+      targetDescription={'Vimeo'}
       onImageFetch={getPreviewImageLink}>
       <iframe
         className='embed-responsive-item'

src/components/markdown-renderer/replace-components/youtube/youtube-frame.tsx

@@ -14,6 +14,7 @@ export const YouTubeFrame: React.FC<IdProps> = ({ id }) => {
       containerClassName={'embed-responsive embed-responsive-16by9'}
       previewContainerClassName={'embed-responsive-item'}
       hoverIcon={'youtube-play'}
+      targetDescription={'YouTube'}
       loadingImageUrl={`https://i.ytimg.com/vi/${id}/maxresdefault.jpg`}>
       <iframe
         className='embed-responsive-item'