From 0a48fd0aa5311f26924cfa58ac9db0e769472355 Mon Sep 17 00:00:00 2001
From: mrdrogdrog <mr.drogdrog@gmail.com>
Date: Thu, 25 Jun 2020 21:49:15 +0200
Subject: [PATCH] Change pdf embedding size when clicked (#275)

* Add activation callback to one-click-embedding
* use activation callback to change size of pdf

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
---
 .../one-click-frame/one-click-embedding.tsx               | 6 +++++-
 .../replace-components/pdf/pdf-frame.tsx                  | 8 +++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx b/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
index 4c22d1db4..a8b012a69 100644
--- a/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
+++ b/src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
@@ -10,14 +10,18 @@ interface OneClickFrameProps {
   tooltip?: string
   containerClassName?: string
   previewContainerClassName?: string
+  onActivate?: () => void
 }
 
-export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContainerClassName, containerClassName, onImageFetch, loadingImageUrl, children, tooltip, hoverIcon }) => {
+export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContainerClassName, containerClassName, onImageFetch, loadingImageUrl, children, tooltip, hoverIcon, onActivate }) => {
   const [showFrame, setShowFrame] = useState(false)
   const [previewImageLink, setPreviewImageLink] = useState<string>(loadingImageUrl)
 
   const showChildren = () => {
     setShowFrame(true)
+    if (onActivate) {
+      onActivate()
+    }
   }
 
   useEffect(() => {
diff --git a/src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx b/src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx
index 6141f78c5..f5ddb80c4 100644
--- a/src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx
+++ b/src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { ExternalLink } from '../../../../common/links/external-link'
 import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
 import './pdf-frame.scss'
@@ -8,10 +8,12 @@ export interface PdfFrameProps {
 }
 
 export const PdfFrame: React.FC<PdfFrameProps> = ({ url }) => {
+  const [activated, setActivated] = useState(false)
+
   return (
-    <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-4by3'}
+    <OneClickEmbedding containerClassName={`embed-responsive embed-responsive-${activated ? '4by3' : '16by9'}`}
       previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'}
-      loadingImageUrl={''}>
+      loadingImageUrl={''} onActivate={() => setActivated(true)}>
       <object type={'application/pdf'} data={url} className={'pdf-frame'}>
         <ExternalLink text={url} href={url}/>
       </object>