Poc/base64 video

src/constants/contentTypes.ts

@@ -1,8 +1,10 @@
+// TODO: refactor, it seems we could only check the starting part
 export enum CONTENT_TYPES {
   TEXT_HTML = 'text/html',
   IMAGE_PNG = 'image/png',
   IMAGE_JPEG = 'image/jpeg',
   IMAGE_GIF = 'image/gif',
   IMAGE_BMP = 'image/bmp',
-  APPLICATION_PDF = 'application/pdf'
+  APPLICATION_PDF = 'application/pdf',
+  VIDEO_MP4= 'video/mp4'
 }

src/helpers/base64.ts

@@ -1,5 +1,11 @@
+import { BlockcertsV3Display } from '@blockcerts/cert-verifier-js';
+
 const toBase64 = (textContent: string): string => {
   return window.btoa(textContent);
 };
 
+export function getBase64String (display: BlockcertsV3Display): string {
+  return `data:${display.contentMediaType};${display.contentEncoding},${display.content}`;
+}
+
 export default toBase64;

src/selectors/certificate.ts

@@ -3,9 +3,10 @@ import sanitize from '../../sanitizer/sanitizer';
 import getDateFormat from '../i18n/getDateFormat';
 import { isValidUrl } from '../helpers/validations';
 import { VERIFICATION_STATUSES } from '@blockcerts/cert-verifier-js';
-import type { IVerificationMapItem, Signers, Certificate } from '@blockcerts/cert-verifier-js';
 import { CONTENT_TYPES } from '../constants/contentTypes';
-import { BlockcertsVerifierState } from '../store/getInitialState';
+import { getBase64String } from '../helpers/base64';
+import type { IVerificationMapItem, Signers, Certificate } from '@blockcerts/cert-verifier-js';
+import type { BlockcertsVerifierState } from '../store/getInitialState';
 
 export function getCertificateDefinition (state: BlockcertsVerifierState): Certificate {
   return state.certificateDefinition;
@@ -147,12 +148,13 @@ export function getDisplayAsHTML (state: BlockcertsVerifierState): string {
       case CONTENT_TYPES.IMAGE_JPEG:
       case CONTENT_TYPES.IMAGE_GIF:
       case CONTENT_TYPES.IMAGE_BMP:
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        return `<img src="data:${display.contentMediaType};${display.contentEncoding},${display.content}"/>`;
+        return `<img src="${getBase64String(display)}"/>`;
 
       case CONTENT_TYPES.APPLICATION_PDF:
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        return `<embed width="100%" height="100%" type="application/pdf" src="data:${display.contentMediaType};${display.contentEncoding},${display.content}"/>`;
+        return `<embed width="100%" height="100%" type="application/pdf" src="${getBase64String(display)}"/>`;
+
+      case CONTENT_TYPES.VIDEO_MP4:
+        return `<video src="${getBase64String(display)}" controls style="max-width: 100%;">`;
 
       default:
         return '';