[FEAT] Rework DaffMediaGalleryComponent to support videos

[xelaint]

💡 Feature request

Feature Name

Rework DaffMediaGalleryComponent to support videos

The Desired Behavior

The thumbnails in the media gallery should be smaller versions of the main image, and if it's a video, it should show a small image of a video (not the video itself) in the thumbnail. The current implementation ends up displaying the actual videos in the thumbnail, which is not what we want.

Your Use Case

Prior Work

Environment

Daffodil version: X.Y.Z
Angular version: X.Y.Z 

 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[damienwebdev]

There's also another related issue with this.

Currently, the daff-media-gallery renders the component you gave it in the list of thumbnails. This means that we're double rendering a component, which is probably a bad idea.

Consider the following:

<daff-media-gallery>
	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1556804335-2fa563e93aae?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3763&q=80" alt="Drink" width="946" height="946"></daff-image>
	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1607344635159-59930e3330b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="Drink" width="946" height="946"></daff-image>
	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1584559582213-787a2953dcbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="Fruits" width="946" height="946"></daff-image>
	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1587324438673-56c78a866b15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="Lemons" width="946" height="946"></daff-image>
	<daff-image daffThumbnail src="https://images.unsplash.com/photo-1543363136-7fbfcd3b240d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80" alt="Avocado" width="946" height="946"></daff-image>
  <daff-video 
      daffThumbnail
      src="https://path.to.image/file.mp4" 
      poster="https://path.to.image/file.jpg">
    </daff-video>
  <my-custom-component
    daffThumbnail="https://path.to.image/file.jpg"
  ></my-custom-component>
</daff-media-gallery>

<!-- Wrong Implementation v1-->
<daff-media-gallery>
  <ul>
    <li></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
  </ul>
  <div>
    <daff-image></daff-image>
  </div>
</daff-media-gallery>

<!-- Wrong Implementation v2-->
<daff-media-gallery>
  <ul>
    <li><daff-video></daff-video></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
  </ul>
  <div>
    <daff-video></daff-video>
  </div>
</daff-media-gallery>

<!-- Possible Correct Implementaton -->
<daff-media-gallery>
  <ul>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
    <li><daff-image></daff-image></li>
  </ul>
  <div>
    <daff-video></daff-video>
  </div>
</daff-media-gallery>

<!-- Possible Correct Implementaton -->
<daff-media-gallery>
  <ul>
    <li><img/></li>
    <li><img/></li>
    <li><img/></li>
    <li><img/></li>
    <li><img/></li>
  </ul>
  <div>
    <daff-video></daff-video>
  </div>
</daff-media-gallery>