feat(OHIF):Add DICOM Video Display

* feat(OHIFv3):Add a video viewport

* Fixed a couple of viewing issues

* fix(OHIF):If not all instances are used by a given provider, then continue to add items

* Added video data

* Add a basic e2e test for video display

* Adding a screen shot as requested

extensions/dicom-video/src/getSopClassHandlerModule.js

@@ -0,0 +1,84 @@
+import { SOPClassHandlerName, SOPClassHandlerId } from './id';
+import { utils, classes } from '@ohif/core';
+
+const { ImageSet } = classes;
+
+const SOP_CLASS_UIDS = {
+  VIDEO_MICROSCOPIC_IMAGE_STORAGE: '1.2.840.10008.5.1.4.1.1.77.1.2.1',
+  VIDEO_PHOTOGRAPHIC_IMAGE_STORAGE: '1.2.840.10008.5.1.4.1.1.77.1.4.1',
+  VIDEO_ENDOSCOPIC_IMAGE_STORAGE: '1.2.840.10008.5.1.4.1.1.77.1.1.1',
+  /** Need to use fallback, could be video or image */
+  SECONDARY_CAPTURE_IMAGE_STORAGE: '1.2.840.10008.5.1.4.1.1.7',
+  MULTIFRAME_TRUE_COLOR_SECONDARY_CAPTURE_IMAGE_STORAGE:
+    '1.2.840.10008.5.1.4.1.1.7.4',
+};
+
+const sopClassUids = Object.values(SOP_CLASS_UIDS);
+
+const SupportedTransferSyntaxes = {
+  MPEG4_AVC_264_HIGH_PROFILE: '1.2.840.10008.1.2.4.102',
+  MPEG4_AVC_264_BD_COMPATIBLE_HIGH_PROFILE: '1.2.840.10008.1.2.4.103',
+  MPEG4_AVC_264_HIGH_PROFILE_FOR_2D_VIDEO: '1.2.840.10008.1.2.4.104',
+  MPEG4_AVC_264_HIGH_PROFILE_FOR_3D_VIDEO: '1.2.840.10008.1.2.4.105',
+  MPEG4_AVC_264_STEREO_HIGH_PROFILE: '1.2.840.10008.1.2.4.106',
+  HEVC_265_MAIN_PROFILE: '1.2.840.10008.1.2.4.107',
+  HEVC_265_MAIN_10_PROFILE: '1.2.840.10008.1.2.4.108',
+};
+
+const supportedTransferSyntaxUIDs = Object.values(SupportedTransferSyntaxes);
+
+const _getDisplaySetsFromSeries = (instances, servicesManager, extensionManager) => {
+  const dataSource = extensionManager.getActiveDataSource()[0];
+  return instances
+    .filter(metadata => {
+      const tsuid = metadata.AvailableTransferSyntaxUID ||
+        metadata.TransferSyntaxUID || metadata['00083002'];
+      return supportedTransferSyntaxUIDs.includes(tsuid);
+    })
+    .map(instance => {
+      const { Modality, FrameOfReferenceUID, SOPInstanceUID } = instance;
+      const { SeriesDescription, ContentDate, ContentTime } = instance;
+      const { SeriesNumber, SeriesDate, SeriesInstanceUID, StudyInstanceUID, NumberOfFrames } = instance;
+      const displaySet = {
+        //plugin: id,
+        Modality,
+        displaySetInstanceUID: utils.guid(),
+        SeriesDescription,
+        SeriesNumber,
+        SeriesDate,
+        SOPInstanceUID,
+        SeriesInstanceUID,
+        StudyInstanceUID,
+        SOPClassHandlerId,
+        referencedImages: null,
+        measurements: null,
+        videoUrl: dataSource.retrieve.directURL({ instance }),
+        others: [instance],
+        thumbnailSrc: dataSource.retrieve.directURL({ instance, defaultPath: "/thumbnail", defaultType: "image/jpeg", tag: "Absent" }),
+        isDerivedDisplaySet: true,
+        isLoaded: false,
+        sopClassUids,
+        numImageFrames: NumberOfFrames,
+        instance,
+      };
+      return displaySet;
+    });
+};
+
+export default function getSopClassHandlerModule({ servicesManager, extensionManager }) {
+  const getDisplaySetsFromSeries = instances => {
+    return _getDisplaySetsFromSeries(
+      instances,
+      servicesManager,
+      extensionManager
+    );
+  };
+
+  return [
+    {
+      name: SOPClassHandlerName,
+      sopClassUids,
+      getDisplaySetsFromSeries,
+    },
+  ];
+}

extensions/dicom-video/src/id.js

@@ -0,0 +1,7 @@
+const id = 'org.ohif.dicom-video';
+
+export default id;
+
+const SOPClassHandlerName = 'dicom-video';
+const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
+export { SOPClassHandlerName, SOPClassHandlerId };

extensions/dicom-video/src/index.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import getSopClassHandlerModule from './getSopClassHandlerModule';
+import id from './id.js';
+
+const Component = React.lazy(() => {
+  return import(
+    /* webpackPrefetch: true */ './viewports/OHIFCornerstoneVideoViewport'
+  );
+});
+
+const OHIFCornerstoneVideoViewport = props => {
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <Component {...props} />
+    </React.Suspense>
+  );
+};
+
+/**
+ *
+ */
+export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
+  id,
+  dependencies: [
+    // TODO -> This isn't used anywhere yet, but we do have a hard dependency, and need to check for these in the future.
+    // OHIF-229
+    {
+      id: 'org.ohif.cornerstone',
+      version: '3.0.0',
+    },
+    {
+      id: 'org.ohif.measurement-tracking',
+      version: '^0.0.1',
+    },
+  ],
+
+  preRegistration({ servicesManager, configuration = {} }) {
+    // No-op for now
+  },
+
+  /**
+   *
+   *
+   * @param {object} [configuration={}]
+   * @param {object|array} [configuration.csToolsConfig] - Passed directly to `initCornerstoneTools`
+   */
+  getViewportModule({ servicesManager, extensionManager }) {
+    const ExtendedOHIFCornerstoneVideoViewport = props => {
+      return (
+        <OHIFCornerstoneVideoViewport
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          {...props}
+        />
+      );
+    };
+
+    return [{ name: 'dicom-video', component: ExtendedOHIFCornerstoneVideoViewport }];
+  },
+  getCommandsModule({ servicesManager }) {
+    return {
+      definitions: {
+        setToolActive: {
+          commandFn: ({ toolName, element }) => {
+            if (!toolName) {
+              console.warn('No toolname provided to setToolActive command');
+            }
+
+            // Set same tool or alt tool
+            const toolAlias = _getToolAlias(toolName);
+
+            cornerstoneTools.setToolActiveForElement(element, toolAlias, {
+              mouseButtonMask: 1,
+            });
+          },
+          storeContexts: [],
+          options: {},
+        },
+      },
+      defaultContext: 'ACTIVE_VIEWPORT::VIDEO',
+    };
+  },
+  getSopClassHandlerModule,
+};
+
+function _getToolAlias(toolName) {
+  let toolAlias = toolName;
+
+  switch (toolName) {
+    case 'EllipticalRoi':
+      toolAlias = 'SREllipticalRoi';
+      break;
+  }
+
+  return toolAlias;
+}

extensions/dicom-video/src/tools/modules/dicomVideoModule.js

@@ -0,0 +1,61 @@
+import cornerstone from 'cornerstone-core';
+
+const state = {
+  TrackingUniqueIdentifier: null,
+  trackingIdentifiersByEnabledElementUUID: {},
+};
+
+function setTrackingUniqueIdentifiersForElement(
+  element,
+  trackingUniqueIdentifiers,
+  activeIndex = 0
+) {
+  const enabledElement = cornerstone.getEnabledElement(element);
+  const { uuid } = enabledElement;
+
+  state.trackingIdentifiersByEnabledElementUUID[uuid] = {
+    trackingUniqueIdentifiers,
+    activeIndex,
+  };
+}
+
+function setActiveTrackingUniqueIdentifierForElement(
+  element,
+  TrackingUniqueIdentifier
+) {
+  const enabledElement = cornerstone.getEnabledElement(element);
+  const { uuid } = enabledElement;
+
+  const trackingIdentifiersForElement =
+    state.trackingIdentifiersByEnabledElementUUID[uuid];
+
+  if (trackingIdentifiersForElement) {
+    const activeIndex = trackingIdentifiersForElement.trackingUniqueIdentifiers.findIndex(
+      tuid => tuid === TrackingUniqueIdentifier
+    );
+
+    trackingIdentifiersForElement.activeIndex = activeIndex;
+  }
+}
+
+function getTrackingUniqueIdentifiersForElement(element) {
+  const enabledElement = cornerstone.getEnabledElement(element);
+  const { uuid } = enabledElement;
+
+  if (state.trackingIdentifiersByEnabledElementUUID[uuid]) {
+    return state.trackingIdentifiersByEnabledElementUUID[uuid];
+  }
+
+  return { trackingUniqueIdentifiers: [] };
+}
+
+export default {
+  state,
+  getters: {
+    trackingUniqueIdentifiersForElement: getTrackingUniqueIdentifiersForElement,
+  },
+  setters: {
+    trackingUniqueIdentifiersForElement: setTrackingUniqueIdentifiersForElement,
+    activeTrackingUniqueIdentifierForElement: setActiveTrackingUniqueIdentifierForElement,
+  },
+};

extensions/dicom-video/src/viewports/OHIFCornerstoneVideoViewport.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import cornerstoneTools from 'cornerstone-tools';
+import cornerstone from 'cornerstone-core';
+import CornerstoneViewport from 'react-cornerstone-viewport';
+import OHIF, { DicomMetadataStore, utils } from '@ohif/core';
+import {
+  Notification,
+  ViewportActionBar,
+  useViewportGrid,
+  useViewportDialog,
+} from '@ohif/ui';
+import { adapters } from 'dcmjs';
+import id from '../id';
+
+
+function OHIFCornerstoneVideoViewport({
+  children,
+  dataSource,
+  displaySet,
+  viewportIndex,
+  servicesManager,
+  extensionManager,
+}) {
+  const {
+    DisplaySetService,
+    MeasurementService,
+    ToolBarService,
+  } = servicesManager.services;
+  const { videoUrl } = displaySet;
+  const mimeType = "video/mp4";
+
+  // Need to copies of the source to fix a firefox bug
+  return (
+    <div className="bg-primary-black w-full h-full">
+      <video
+        src={videoUrl}
+        controls
+        controlsList="nodownload"
+        preload="auto"
+        className="w-full h-full"
+      >
+        <source src={videoUrl} type={mimeType} />
+        <source src={videoUrl} type={mimeType} />
+        Video src/type not supported: <a href={videoUrl}>{videoUrl} of type {mimeType}</a>
+      </video>
+    </div>
+  )
+}
+
+export default OHIFCornerstoneVideoViewport;