added types de contenus for flashcard content

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;

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
+        ');
+    }
+}

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
+}