From bc8bb7c6e0735d0279e0d98fa25a05bf759abf24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9becca=20Tinchon?= <rebecca.tinchon@hotmail.fr>
Date: Fri, 15 Sep 2023 18:20:01 +0200
Subject: [PATCH] added types de contenus for flashcard content

---
 src/plugin/flashcard/Entity/Flashcard.php     |  34 ++++
 .../Migrations/Version20230913120151.php      |  32 ++++
 .../resources/flashcard/components/cards.jsx  |  43 -----
 .../flashcard/editor/components/cards.jsx     |  58 ++++++
 .../flashcard/editor/components/editor.jsx    | 171 ++++++++++--------
 .../editor/modals/card/components/modal.jsx   | 127 ++++++++++++-
 .../flashcard/player/components/player.jsx    |  28 ++-
 .../modules/resources/flashcard/prop-types.js |   4 +-
 .../Resources/styles/resources/flashcard.scss |  88 +++++----
 .../Resources/translations/flashcard.en.json  |   2 +
 .../Resources/translations/flashcard.fr.json  |   2 +
 .../Serializer/FlashcardDeckSerializer.php    |  26 ++-
 12 files changed, 437 insertions(+), 178 deletions(-)
 create mode 100644 src/plugin/flashcard/Installation/Migrations/Version20230913120151.php
 delete mode 100644 src/plugin/flashcard/Resources/modules/resources/flashcard/components/cards.jsx
 create mode 100644 src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/cards.jsx

diff --git a/src/plugin/flashcard/Entity/Flashcard.php b/src/plugin/flashcard/Entity/Flashcard.php
index a4c27200854..53f2e138da7 100644
--- a/src/plugin/flashcard/Entity/Flashcard.php
+++ b/src/plugin/flashcard/Entity/Flashcard.php
@@ -27,11 +27,21 @@ class Flashcard
      */
     private string $visibleContent;
 
+    /**
+     * @ORM\Column(type="string")
+     */
+    private string $visibleContentType;
+
     /**
      * @ORM\Column(type="text")
      */
     private string $hiddenContent;
 
+    /**
+     * @ORM\Column(type="string")
+     */
+    private string $hiddenContentType;
+
     /**
      * @ORM\ManyToOne(targetEntity="FlashcardDeck", inversedBy="cards")
      *
@@ -73,6 +83,18 @@ public function setVisibleContent(string $visibleContent): self
         return $this;
     }
 
+    public function getVisibleContentType(): string
+    {
+        return $this->visibleContentType;
+    }
+
+    public function setVisibleContentType(string $visibleContentType): self
+    {
+        $this->visibleContentType = $visibleContentType;
+
+        return $this;
+    }
+
     public function getHiddenContent(): string
     {
         return $this->hiddenContent;
@@ -85,6 +107,18 @@ public function setHiddenContent(string $hiddenContent): self
         return $this;
     }
 
+    public function getHiddenContentType(): string
+    {
+        return $this->hiddenContentType;
+    }
+
+    public function setHiddenContentType(string $hiddenContentType): self
+    {
+        $this->hiddenContentType = $hiddenContentType;
+
+        return $this;
+    }
+
     public function getDeck(): FlashcardDeck
     {
         return $this->deck;
diff --git a/src/plugin/flashcard/Installation/Migrations/Version20230913120151.php b/src/plugin/flashcard/Installation/Migrations/Version20230913120151.php
new file mode 100644
index 00000000000..892bcc1d1cb
--- /dev/null
+++ b/src/plugin/flashcard/Installation/Migrations/Version20230913120151.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Claroline\FlashcardBundle\Installation\Migrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated migration based on mapping information: modify it with caution.
+ *
+ * Generation date: 2023/09/13 12:01:51
+ */
+final class Version20230913120151 extends AbstractMigration
+{
+    public function up(Schema $schema): void
+    {
+        $this->addSql('
+            ALTER TABLE claro_flashcard_card 
+            ADD visibleContentType VARCHAR(255) NOT NULL, 
+            ADD hiddenContentType VARCHAR(255) NOT NULL
+        ');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('
+            ALTER TABLE claro_flashcard_card 
+            DROP visibleContentType, 
+            DROP hiddenContentType
+        ');
+    }
+}
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/components/cards.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/components/cards.jsx
deleted file mode 100644
index 5212e362abc..00000000000
--- a/src/plugin/flashcard/Resources/modules/resources/flashcard/components/cards.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-import {PropTypes as T} from 'prop-types'
-
-import {ContentHtml} from '#/main/app/content/components/html'
-import {Toolbar} from '#/main/app/action/components/toolbar'
-import {Card as CardTypes} from '#/plugin/flashcard/resources/flashcard/prop-types'
-
-const Cards = props =>
-  <ul className="flashcards">
-    {props.cards.map((card) =>
-      <li key={card.id} className="flashcard-preview card">
-        <div className="flashcard-content">
-          {props.actions && (
-            <div className="flashcard-actions">
-              <Toolbar
-                id={`${card.id}-btn`}
-                className="flashcard-actions"
-                buttonName="btn"
-                tooltip="bottom"
-                size="sm"
-                toolbar="more"
-                actions={props.actions(card)}
-              />
-            </div>
-          )}
-          <div className="card-body">
-            <ContentHtml>{card.visibleContent}</ContentHtml>
-          </div>
-        </div>
-      </li>
-    )}
-  </ul>
-
-Cards.propTypes = {
-  cards: T.arrayOf(T.shape(
-    CardTypes.propTypes
-  )),
-  actions: T.func
-}
-
-export {
-  Cards
-}
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/cards.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/cards.jsx
new file mode 100644
index 00000000000..cf0d16d9470
--- /dev/null
+++ b/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/cards.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import {PropTypes as T} from 'prop-types'
+
+import {asset} from '#/main/app/config/asset'
+import {ContentHtml} from '#/main/app/content/components/html'
+import {Toolbar} from '#/main/app/action/components/toolbar'
+
+import {Card as CardTypes} from '#/plugin/flashcard/resources/flashcard/prop-types'
+
+const Cards = props =>
+  <ul className="flashcards">
+    {props.cards.map((card) =>
+      <li key={card.id} className="flashcard-preview">
+        {props.actions &&
+          <div className="flashcard-actions">
+            <Toolbar
+              id={`${card.id}-btn`}
+              buttonName="action-button"
+              tooltip="right"
+              size="sm"
+              toolbar="more"
+              actions={props.actions(card)}
+            />
+          </div>
+        }
+        { card.visibleContentType === 'image' &&
+          <img src={asset(card.visibleContent.url)} alt={card.question} className="flashcard-thumbnail" />
+        }
+        { card.visibleContentType === 'video' &&
+          <video className="flashcard-thumbnail not-video-js vjs-default-skin vjs-16-9">
+            <source src={asset(card.visibleContent.url)} />
+          </video>
+        }
+        { card.visibleContentType === 'audio' &&
+          <audio controls style={{margin: '50px 10px'}} controlsList="noremoteplayback nodownload noplaybackrate">
+            <source src={asset(card.visibleContent.url)}/>
+          </audio>
+        }
+        { card.visibleContentType === 'text' &&
+          <div className="flashcard-content">
+            <ContentHtml>{card.visibleContent}</ContentHtml>
+          </div>
+        }
+      </li>
+    )}
+  </ul>
+
+Cards.propTypes = {
+  cards: T.arrayOf(T.shape(
+    CardTypes.propTypes
+  )),
+  visibleContentType: T.string,
+  actions: T.func
+}
+
+export {
+  Cards
+}
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/editor.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/editor.jsx
index 93c9aa76a4b..fb8cf96eac4 100644
--- a/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/editor.jsx
+++ b/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/components/editor.jsx
@@ -1,10 +1,9 @@
-import React, {Fragment} from 'react'
+import React from 'react'
 import {PropTypes as T} from 'prop-types'
 import {connect} from 'react-redux'
 import get from 'lodash/get'
 
 import {trans} from '#/main/app/intl/translation'
-import {ContentTitle} from '#/main/app/content/components/title'
 import {CALLBACK_BUTTON, LINK_BUTTON, MODAL_BUTTON} from '#/main/app/buttons'
 import {actions as formActions} from '#/main/app/content/form/store'
 import {FormData} from '#/main/app/content/form/containers/data'
@@ -17,82 +16,90 @@ import {selectors} from '#/plugin/flashcard/resources/flashcard/editor/store'
 import {selectors as baseSelectors} from '#/plugin/flashcard/resources/flashcard/store/selectors'
 import {Card as CardTypes} from '#/plugin/flashcard/resources/flashcard/prop-types'
 import {MODAL_CARD} from '#/plugin/flashcard/resources/flashcard/editor/modals/card'
-import {Cards} from '#/plugin/flashcard/resources/flashcard/components/cards'
+import {Cards} from '#/plugin/flashcard/resources/flashcard/editor/components/cards'
 
 const EditorComponent = props =>
-  <Fragment>
-    <ContentTitle
-      level={3}
-      displayLevel={2}
-      title={trans('parameters')}
-    />
-
-    <FormData
-      level={2}
-      name={selectors.FORM_NAME}
-      buttons={true}
-      target={() => ['apiv2_flashcard_deck_update', {id: props.flashcardDeck.id}]}
-      cancel={{
-        type: LINK_BUTTON,
-        target: props.path,
-        exact: true
-      }}
-      definition={[{
+  <FormData
+    level={2}
+    className="mt-2"
+    title={trans('parameters')}
+    name={selectors.FORM_NAME}
+    buttons={true}
+    target={() => ['apiv2_flashcard_deck_update', {id: props.flashcardDeck.id}]}
+    cancel={{
+      type: LINK_BUTTON,
+      target: props.path,
+      exact: true
+    }}
+    definition={[
+      {
         icon: 'fa fa-fw fa-home',
         title: trans('overview'),
-        fields: [{
-          name: 'overview.display',
-          type: 'boolean',
-          label: trans('enable_overview'),
-          linked: [{
-            name: 'overview.message',
-            type: 'html',
-            label: trans('overview_message'),
-            displayed: (flashcardDeck) => get(flashcardDeck, 'overview.display')
-          }]
-        }]
+        fields: [
+          {
+            name: 'overview.display',
+            type: 'boolean',
+            label: trans('enable_overview'),
+            linked: [
+              {
+                name: 'overview.message',
+                type: 'html',
+                label: trans('overview_message'),
+                displayed: (flashcardDeck) => get(flashcardDeck, 'overview.display')
+              }
+            ]
+          }
+        ]
       }, {
         icon: 'fa fa-fw fa-dice-d20',
         title: trans('flashcard_options', {}, 'flashcard'),
-        fields: [{
-          name: 'draw',
-          type: 'number',
-          label: trans('draw_options', {}, 'flashcard'),
-          help: trans('options_desc', {}, 'flashcard'),
-          options: {
-            min: 1,
-            max: props.cards.length
+        fields: [
+          {
+            name: 'draw',
+            type: 'number',
+            label: trans('draw_options', {}, 'flashcard'),
+            help: trans('options_desc', {}, 'flashcard'),
+            options: {
+              min: 1,
+              max: props.cards.length
+            }
           }
-        }]
+        ]
       }, {
         icon: 'fa fa-fw fa-flag-checkered',
         title: trans('end_page'),
-        fields: [{
-          name: 'end.display',
-          type: 'boolean',
-          label: trans('show_end_page'),
-          linked: [{
-            name: 'end.message',
-            type: 'html',
-            label: trans('end_message'),
-            displayed: (flashcardDeck) => get(flashcardDeck, 'end.display')
-          }]
-        }]
-      }]}
-    >
-      {0 === props.cards.length &&
-        <ContentPlaceholder
-          className={'flashcard-empty'}
-          size="lg"
-          icon="fa fa-image"
-          title={trans('no_card', {}, 'flashcard')}
-        />
+        fields: [
+          {
+            name: 'end.display',
+            type: 'boolean',
+            label: trans('show_end_page'),
+            linked: [
+              {
+                name: 'end.message',
+                type: 'html',
+                label: trans('end_message'),
+                displayed: (flashcardDeck) => get(flashcardDeck, 'end.display')
+              }
+            ]
+          }
+        ]
       }
+    ]}
+  >
+    {0 === props.cards.length &&
+      <ContentPlaceholder
+        className={'flashcard-empty'}
+        size="lg"
+        icon="fa fa-image"
+        title={trans('no_card', {}, 'flashcard')}
+      />
+    }
 
-      {0 !== props.cards.length &&
-        <Cards
-          cards={props.cards}
-          actions={(card) => [{
+    {0 !== props.cards.length &&
+      <Cards
+        cards={props.cards}
+        actions={(card) => [
+          {
             name: 'configure',
             type: MODAL_BUTTON,
             icon: 'fa fa-fw fa-cog',
@@ -128,21 +135,22 @@ const EditorComponent = props =>
               message: trans('card_delete_message', {}, 'flashcard'),
               button: trans('delete', {}, 'actions')
             }
-          }]}
-        />}
-
-      <Button
-        className="btn btn-primary w-100"
-        type={MODAL_BUTTON}
-        primary={true}
-        size="lg"
-        label={trans('add_card', {}, 'flashcard')}
-        modal={[MODAL_CARD, {
-          save: (card) => props.update('cards', [].concat(props.cards, [card]))
-        }]}
+          }
+        ]}
       />
-    </FormData>
-  </Fragment>
+    }
+
+    <Button
+      className="btn btn-primary w-100"
+      type={MODAL_BUTTON}
+      primary={true}
+      size="lg"
+      label={trans('add_card', {}, 'flashcard')}
+      modal={[MODAL_CARD, {
+        save: (card) => props.update('cards', [].concat(props.cards, [card]))
+      }]}
+    />
+  </FormData>
 
 EditorComponent.propTypes = {
   path: T.string,
@@ -152,7 +160,10 @@ EditorComponent.propTypes = {
   flashcardDeck: T.shape({
     id: T.string.isRequired
   }).isRequired,
-  update: T.func
+  update: T.func.isRequired
+}
+EditorComponent.defaultProps = {
+  cards: []
 }
 
 const Editor = connect(
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/modals/card/components/modal.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/modals/card/components/modal.jsx
index 53b3315c44b..e674c0abde0 100644
--- a/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/modals/card/components/modal.jsx
+++ b/src/plugin/flashcard/Resources/modules/resources/flashcard/editor/modals/card/components/modal.jsx
@@ -30,12 +30,15 @@ const CardModal = props =>
         props.reset(Object.assign({}, CardTypes.defaultProps, {id: makeId()}), true)
       }
     }}
+    onExiting={() => {
+      props.reset(Object.assign({}, CardTypes.defaultProps, {id: makeId()}), true)
+    }}
   >
     <div className="modal-body">
       <FormData
         level={5}
         name={selectors.STORE_NAME}
-        sections={[
+        definition={[
           {
             icon: 'fa fa-fw fa-circle-info',
             title: trans('information'),
@@ -45,15 +48,120 @@ const CardModal = props =>
                 label: trans('question', {}, 'flashcard'),
                 type: 'string'
               }, {
-                name: 'visibleContent',
-                label: trans('visible_content', {}, 'flashcard'),
-                type: 'html',
-                required: true
+                name: 'visibleContentType',
+                label: trans('visible_content_type', {}, 'flashcard'),
+                type: 'choice',
+                required: true,
+                onChange: (newType) => {
+                  if(!props.card)
+                    return
+                  const newCard = JSON.parse(JSON.stringify(props.card))
+                  newCard.visibleContentType = newType
+                  newCard.visibleContent = newType === 'text' ? '' : null
+                  props.reset(newCard)
+                },
+                options: {
+                  condensed: true,
+                  choices: {
+                    text: trans('text'),
+                    image: trans('image'),
+                    video: trans('video'),
+                    audio: trans('audio')
+                  }
+                },
+                linked: [
+                  {
+                    name: 'visibleContent',
+                    type: 'file',
+                    label: trans('file'),
+                    hideLabel: true,
+                    displayed: (card) => -1 !== ['image'].indexOf(card.visibleContentType),
+                    options: {
+                      types: ['image/*']
+                    }
+                  }, {
+                    name: 'visibleContent',
+                    type: 'file',
+                    label: trans('file'),
+                    hideLabel: true,
+                    displayed: (card) => -1 !== ['video'].indexOf(card.visibleContentType),
+                    options: {
+                      types: ['video/*']
+                    }
+                  }, {
+                    name: 'visibleContent',
+                    type: 'file',
+                    label: trans('file'),
+                    hideLabel: true,
+                    displayed: (card) => -1 !== ['audio'].indexOf(card.visibleContentType),
+                    options: {
+                      types: ['audio/*']
+                    }
+                  }, {
+                    name: 'visibleContent',
+                    label: trans('visible_content', {}, 'flashcard'),
+                    type: 'html',
+                    displayed: (card) => -1 !== ['text'].indexOf(card.visibleContentType)
+                  }
+                ]
               }, {
-                name: 'hiddenContent',
-                label: trans('hidden_content', {}, 'flashcard'),
-                type: 'html',
-                required: true
+                name: 'hiddenContentType',
+                label: trans('hidden_content_type', {}, 'flashcard'),
+                type: 'choice',
+                required: true,
+                onChange: (newType) => {
+                  if(!props.card)
+                    return
+                  const newCard = JSON.parse(JSON.stringify(props.card))
+                  newCard.hiddenContentType = newType
+                  newCard.hiddenContent = newType === 'text' ? '' : null
+                  props.reset(newCard)
+                },
+                options: {
+                  condensed: true,
+                  choices: {
+                    text: trans('text'),
+                    image: trans('image'),
+                    video: trans('video'),
+                    audio: trans('audio')
+                  }
+                },
+                linked: [
+                  {
+                    name: 'hiddenContent',
+                    type: 'file',
+                    label: trans('file'),
+                    hideLabel: true,
+                    displayed: (card) => -1 !== ['image'].indexOf(card.hiddenContentType),
+                    options: {
+                      types: ['image/*']
+                    }
+                  }, {
+                    name: 'hiddenContent',
+                    type: 'file',
+                    label: trans('file'),
+                    hideLabel: true,
+                    displayed: (card) => -1 !== ['video'].indexOf(card.hiddenContentType),
+                    options: {
+                      types: ['video/*']
+                    }
+                  }, {
+                    name: 'hiddenContent',
+                    type: 'file',
+                    label: trans('file'),
+                    hideLabel: true,
+                    displayed: (card) => -1 !== ['audio'].indexOf(card.hiddenContentType),
+                    options: {
+                      types: ['audio/*']
+                    }
+                  }, {
+                    name: 'hiddenContent',
+                    label: trans('hidden_content', {}, 'flashcard'),
+                    type: 'html',
+                    displayed: (card) => -1 !== ['text'].indexOf(card.hiddenContentType),
+                    required: true
+                  }
+                ]
               }
             ]
           }
@@ -82,7 +190,6 @@ CardModal.propTypes = {
   ),
   isNew: T.bool.isRequired,
   saveEnabled: T.bool.isRequired,
-
   formData: T.shape(
     CardTypes.propTypes
   ).isRequired,
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/player/components/player.jsx b/src/plugin/flashcard/Resources/modules/resources/flashcard/player/components/player.jsx
index 91e07ad8a22..d07c2c94a2a 100644
--- a/src/plugin/flashcard/Resources/modules/resources/flashcard/player/components/player.jsx
+++ b/src/plugin/flashcard/Resources/modules/resources/flashcard/player/components/player.jsx
@@ -3,6 +3,7 @@ import { useHistory, useRouteMatch } from 'react-router-dom'
 import { PropTypes as T } from 'prop-types'
 
 import { trans } from '#/main/app/intl/translation'
+import {asset} from '#/main/app/config'
 import {Button} from '#/main/app/action/components/button'
 import {CallbackButton} from '#/main/app/buttons/callback/components/button'
 import {CALLBACK_BUTTON} from '#/main/app/buttons'
@@ -40,10 +41,27 @@ const Player = props => {
 
   const renderCardContent = (contentKey) => (
     <>
-      {currentCard.question && <p className="flashcard-element-question">{currentCard.question}</p>}
-      <ContentHtml className="flashcard-element-content">
-        {currentCard[contentKey]}
-      </ContentHtml>
+      {currentCard.question &&
+        <p className="flashcard-element-question">{currentCard.question}</p>
+      }
+      <div className="flashcard-element-content">
+        { currentCard[contentKey+'Type'] === 'text' &&
+          <ContentHtml>{currentCard[contentKey]}</ContentHtml>
+        }
+        { currentCard[contentKey+'Type'] === 'image' &&
+          <img src={asset(currentCard[contentKey].url)} alt={currentCard.question} className="flashcard-media" />
+        }
+        { currentCard[contentKey+'Type'] === 'video' &&
+          <video className="flashcard-video flashcard-media not-video-js vjs-default-skin vjs-16-9" controls>
+            <source src={asset(currentCard[contentKey].url)} type={currentCard.type}/>
+          </video>
+        }
+        { currentCard[contentKey+'Type'] === 'audio' &&
+          <audio controls>
+            <source src={asset(currentCard[contentKey].url)} type={currentCard.type}/>
+          </audio>
+        }
+      </div>
     </>
   )
 
@@ -59,7 +77,7 @@ const Player = props => {
   return (
     <section>
       <ProgressBar
-        className="progress-minimal"
+        className="mb-2"
         value={(currentCardIndex+1) / maxCards * 100}
         size="xs"
         type="learning"
diff --git a/src/plugin/flashcard/Resources/modules/resources/flashcard/prop-types.js b/src/plugin/flashcard/Resources/modules/resources/flashcard/prop-types.js
index 995b70047e0..76cdc11e201 100644
--- a/src/plugin/flashcard/Resources/modules/resources/flashcard/prop-types.js
+++ b/src/plugin/flashcard/Resources/modules/resources/flashcard/prop-types.js
@@ -3,9 +3,7 @@ import {PropTypes as T} from 'prop-types'
 const Card = {
   propTypes: {
     id: T.string.isRequired,
-    question: T.string,
-    visibleContent: T.string,
-    hiddenContent: T.string
+    question: T.string
   },
   defaultProps: {
     children: []
diff --git a/src/plugin/flashcard/Resources/styles/resources/flashcard.scss b/src/plugin/flashcard/Resources/styles/resources/flashcard.scss
index f017cbe4bbd..e2bb614eee4 100644
--- a/src/plugin/flashcard/Resources/styles/resources/flashcard.scss
+++ b/src/plugin/flashcard/Resources/styles/resources/flashcard.scss
@@ -4,50 +4,63 @@
 
 @import "../variables";
 
+$flashcard-preview-width: 300px;
+$flashcard-preview-height: 200px;
+
 .flashcards {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
+  list-style: none;
+  padding: 0;
 }
 
 .flashcard-preview {
-  width: 300px;
-  height: 200px;
-  background: #fff9ec;
   margin: 10px;
-  justify-content: center;
-  align-items: center;
-  transition: transform 0.2s;
+  display: flex;
+  overflow: hidden;
   position: relative;
+  transition: transform 0.2s;
+  width: $flashcard-preview-width;
+  border-radius: $card-border-radius;
+  border: solid 1px $table-border-color;
+  min-height: $flashcard-preview-height;
 
   .flashcard-actions {
     position: absolute;
     top: 0;
     right: 0;
-    margin: 10px;
+    margin: 4px;
+    z-index: 3;
   }
 
-  p {
-    overflow:hidden;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 4;
+  .flashcard-thumbnail {
+    width: 100%;
+    height: $flashcard-preview-height;
+    object-fit: cover;
+    border-radius: 5px;
   }
 
-  .btn {
-    padding: 4px;
-    border-radius: 0;
+  .flashcard-content {
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+    margin: 10%;
+    p {
+      overflow:hidden;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 4;
+    }
   }
-}
-
-.flashcard-preview:hover {
-  transform: translateY(-5px);
-}
 
-.flashcard-content  {
-  font-size: 14px;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 0 5px 1px #66afe9;
+    border-color: #337ab7;
+  }
 }
 
 .flashcard-player {
@@ -84,34 +97,43 @@
   max-width: 500px;
   width: 80vw;
   height: 300px;
-  margin: 20px;
+  margin: 10px;
   border-radius: 5px;
   box-shadow: 0 0 5px black;
   transition: transform 500ms;
   transform-style: preserve-3d;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 
+  .flashcard-video {
+    width: 100%;
+    border-radius: 5px;
+  }
 
-  &-counter {
-    position: absolute;
-    top: 5px;
-    right: 10px;
-    text-align: right;
-    font-size: 0.7em;
+  .flashcard-media {
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+    border-radius: 5px;
   }
 
   &-question {
     text-align: center;
     font-weight: bold;
+    margin: 0;
   }
 
   &-content {
-    overflow-y: auto;
+    overflow-y: hidden;
   }
 
   &-visible,&-hidden {
     width: 100%;
     height: 250px;
-    padding: 20px;
+    padding: 7px;
     position: absolute;
     backface-visibility: hidden;
   }
@@ -128,7 +150,7 @@
     transform: rotateY(0deg);
   }
 
-  @for $index from 0 through 100 {
+  @for $index from 0 through 3 {
     &-#{$index} {
       left: calc(-13.5px + calc(#{$index} * 10px));
       top: calc(#{$index} * 10px);
diff --git a/src/plugin/flashcard/Resources/translations/flashcard.en.json b/src/plugin/flashcard/Resources/translations/flashcard.en.json
index de53f2722fd..40f434a42bb 100644
--- a/src/plugin/flashcard/Resources/translations/flashcard.en.json
+++ b/src/plugin/flashcard/Resources/translations/flashcard.en.json
@@ -13,7 +13,9 @@
   "card_delete_message": "Are you sure you want to delete this card ?",
 
   "question": "Question",
+  "visible_content_type": "Visible content type",
   "visible_content": "Visible content",
+  "hidden_content_type": "Hidden content type",
   "hidden_content": "Hidden content",
   "show_answer": "Flip the card",
   "right_answer": "I know",
diff --git a/src/plugin/flashcard/Resources/translations/flashcard.fr.json b/src/plugin/flashcard/Resources/translations/flashcard.fr.json
index 9561c47c25e..e056af03ff7 100644
--- a/src/plugin/flashcard/Resources/translations/flashcard.fr.json
+++ b/src/plugin/flashcard/Resources/translations/flashcard.fr.json
@@ -13,7 +13,9 @@
   "card_delete_message": "Êtes-vous sûr de vouloir supprimer cette carte ?",
 
   "question": "Question",
+  "visible_content_type": "Type de contenu pour la face visible",
   "visible_content": "Face visible",
+  "hidden_content_type": "Type de contenu pour la face cachée",
   "hidden_content": "Face cachée",
   "show_answer": "Retourner la carte",
   "right_answer": "Je sais",
diff --git a/src/plugin/flashcard/Serializer/FlashcardDeckSerializer.php b/src/plugin/flashcard/Serializer/FlashcardDeckSerializer.php
index 896c953cf94..724ce54c768 100644
--- a/src/plugin/flashcard/Serializer/FlashcardDeckSerializer.php
+++ b/src/plugin/flashcard/Serializer/FlashcardDeckSerializer.php
@@ -78,8 +78,10 @@ public function serializeCard(Flashcard $flashcard): array
         return [
             'id' => $flashcard->getUuid(),
             'question' => $flashcard->getQuestion(),
-            'visibleContent' => $flashcard->getVisibleContent(),
-            'hiddenContent' => $flashcard->getHiddenContent(),
+            'visibleContent' => 'text' !== $flashcard->getVisibleContentType() ? json_decode($flashcard->getVisibleContent()) : $flashcard->getVisibleContent(),
+            'hiddenContent' => 'text' !== $flashcard->getHiddenContentType() ? json_decode($flashcard->getHiddenContent()) : $flashcard->getHiddenContent(),
+            'visibleContentType' => $flashcard->getVisibleContentType(),
+            'hiddenContentType' => $flashcard->getHiddenContentType(),
         ];
     }
 
@@ -115,8 +117,24 @@ private function deserializeCards(array $cardsData, FlashcardDeck $flashcardDeck
             $card = $flashcardDeck->getCardByUuid($cardData['id']) ?? new Flashcard();
 
             $this->sipe('question', 'setQuestion', $cardData, $card);
-            $this->sipe('visibleContent', 'setVisibleContent', $cardData, $card);
-            $this->sipe('hiddenContent', 'setHiddenContent', $cardData, $card);
+
+            $cardData['visibleContentType'] = $cardData['visibleContentType'] ?? 'text';
+            $cardData['visibleContentType'] = '' != $cardData['visibleContentType'] ? $cardData['visibleContentType'] : 'text';
+            if ('string' !== gettype($cardData['visibleContent'])) {
+                $card->setVisibleContent(json_encode($cardData['visibleContent']));
+            } else {
+                $this->sipe('visibleContent', 'setVisibleContent', $cardData, $card);
+            }
+            $card->setVisibleContentType($cardData['visibleContentType']);
+
+            $cardData['hiddenContentType'] = $cardData['hiddenContentType'] ?? 'text';
+            $cardData['hiddenContentType'] = '' != $cardData['hiddenContentType'] ? $cardData['hiddenContentType'] : 'text';
+            if ('string' !== gettype($cardData['hiddenContent'])) {
+                $card->setHiddenContent(json_encode($cardData['hiddenContent']));
+            } else {
+                $this->sipe('hiddenContent', 'setHiddenContent', $cardData, $card);
+            }
+            $card->setHiddenContentType($cardData['hiddenContentType']);
 
             if (!$flashcardDeck->hasCard($card)) {
                 $flashcardDeck->addCard($card);