OHIF-323: Cine Dialog (#1961)

* ohif-323: add cineplayer flow

* ohif-323: improve toolbar flow of cine

* ohif-323: improve cine styles

* ohif-323: use toggle instead of set

* ohif-323: add compatibility comment

* ohif-323: move cine logic to command

* ohif-323: cr update

* ohif-323: remove typo and update svg title

* ohif-323: remove log

* ohif-323: update props and remove dead code

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/ui/src/components/CinePlayer/CinePlayer.jsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import { IconButton, Icon } from '@ohif/ui';
+
+import './CinePlayerCustomInputRange.css';
+
+const CinePlayer = ({
+  isPlaying,
+  minFrameRate,
+  maxFrameRate,
+  stepFrameRate,
+  frameRate: defaultFrameRate,
+  onFrameRateChange,
+  onPlayPauseChange,
+  onClose
+}) => {
+  const [frameRate, setFrameRate] = useState(defaultFrameRate);
+  const debouncedSetFrameRate = debounce(onFrameRateChange, 300);
+
+  const onFrameRateChangeHandler = ({ target }) => {
+    const frameRate = parseFloat(target.value);
+    debouncedSetFrameRate(frameRate);
+    setFrameRate(frameRate);
+  };
+
+  const onPlayPauseChangeHandler = () => onPlayPauseChange(!isPlaying);
+
+  const action = {
+    false: { icon: 'old-play' },
+    true: { icon: 'old-stop' }
+  };
+
+  return (
+    <div className="CinePlayer flex flex-row h-10 items-center justify-center border border-primary-light rounded-full">
+      <IconButton
+        variant="text"
+        color="inherit"
+        size="initial"
+        className="mr-3 ml-4 text-primary-active"
+        onClick={onPlayPauseChangeHandler}
+      >
+        <Icon width="15px" height="15px" name={action[isPlaying].icon} />
+      </IconButton>
+      <div className="flex flex-col h-full justify-center pt-2 mr-3 pl-1 pr-1">
+        <input
+          type="range"
+          name="frameRate"
+          min={minFrameRate}
+          max={maxFrameRate}
+          step={stepFrameRate}
+          value={frameRate}
+          onChange={onFrameRateChangeHandler}
+        />
+        <p className="mt-1 text-sm text-primary-light">{`${frameRate.toFixed(1)} fps`}</p>
+      </div>
+      <IconButton
+        color="inherit"
+        size="initial"
+        className="mr-3 text-primary-active border border-primary-active rounded-full"
+        onClick={onClose}
+      >
+        <Icon name="close" width="15px" height="15px" />
+      </IconButton>
+    </div>
+  );
+};
+
+const noop = () => { };
+
+CinePlayer.defaultProps = {
+  isPlaying: false,
+  minFrameRate: 1,
+  maxFrameRate: 90,
+  stepFrameRate: 1,
+  frameRate: 24,
+  onPlayPauseChange: noop,
+  onFrameRateChange: noop,
+  onClose: noop
+};
+
+CinePlayer.propTypes = {
+  /** Minimum value for range slider */
+  minFrameRate: PropTypes.number.isRequired,
+  /** Maximum value for range slider */
+  maxFrameRate: PropTypes.number.isRequired,
+  /** Increment range slider can "step" in either direction */
+  stepFrameRate: PropTypes.number.isRequired,
+  frameRate: PropTypes.number.isRequired,
+  /** 'true' if playing, 'false' if paused */
+  isPlaying: PropTypes.bool.isRequired,
+  onPlayPauseChange: PropTypes.func,
+  onFrameRateChange: PropTypes.func,
+  onClose: PropTypes.func,
+};
+
+export default CinePlayer;

platform/ui/src/components/CinePlayer/CinePlayer.mdx

@@ -0,0 +1,42 @@
+---
+name: CinePlayer
+menu: General
+route: components/CinePlayer
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { CinePlayer } from '@ohif/ui';
+
+# Input Text
+
+## Import
+
+```javascript
+import { CinePlayer } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    return (
+      <div className="flex flex-col flex-1 p-4 items-center">
+        <div className="w-56">
+          <CinePlayer
+            cineMinFrameRate={1}
+            cineMaxFrameRate={90}
+            cineStepFrameRate={1}
+            cineFrameRate={24}
+            isPlaying={false}
+          />
+        </div>
+      </div>
+    )
+  }}
+
+</Playground>
+
+## Properties
+
+<Props of={CinePlayer} />

platform/ui/src/components/CinePlayer/CinePlayerCustomInputRange.css

@@ -0,0 +1,105 @@
+/*
+ * This is a custom input style scoped specifically to CinePlayer
+ * written in plain CSS with color variables from tailwind
+ * to avoid complex compatibility configuration.
+ */
+.CinePlayer input[type=range] {
+  -webkit-appearance: none;
+  background: transparent;
+  width: 100%;
+}
+
+.CinePlayer input[type=range]:focus {
+  outline: none;
+}
+
+.CinePlayer input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 2px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  @apply bg-primary-light;
+  border-radius: 5px;
+  border: 0px solid #000000;
+}
+
+.CinePlayer input[type=range]::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 4px solid #000000;
+  height: 18px;
+  width: 17px;
+  border-radius: 50px;
+  @apply bg-primary-light;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -9px;
+}
+
+.CinePlayer input[type=range]:focus::-webkit-slider-runnable-track {
+  @apply bg-primary-light;
+}
+
+.CinePlayer input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 2px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  @apply bg-primary-light;
+  border-radius: 5px;
+  border: 0px solid #000000;
+}
+
+.CinePlayer input[type=range]::-moz-range-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 4px solid #000000;
+  height: 18px;
+  width: 17px;
+  border-radius: 50px;
+  @apply bg-primary-light;
+  cursor: pointer;
+}
+
+.CinePlayer input[type=range]::-ms-track {
+  width: 100%;
+  height: 2px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+
+.CinePlayer input[type=range]::-ms-fill-lower {
+  @apply bg-primary-light;
+  border: 0px solid #000000;
+  border-radius: 10px;
+  box-shadow: 0px 0px 0px #000000;
+}
+
+.CinePlayer input[type=range]::-ms-fill-upper {
+  @apply bg-primary-light;
+  border: 0px solid #000000;
+  border-radius: 10px;
+  box-shadow: 0px 0px 0px #000000;
+}
+
+.CinePlayer input[type=range]::-ms-thumb {
+  margin-top: 1px;
+  box-shadow: 0px 0px 0px #000000;
+  border: 4px solid #000000;
+  height: 18px;
+  width: 17px;
+  border-radius: 50px;
+  @apply bg-primary-light;
+  cursor: pointer;
+}
+
+.CinePlayer input[type=range]:focus::-ms-fill-lower {
+  @apply bg-primary-light;
+}
+
+.CinePlayer input[type=range]:focus::-ms-fill-upper {
+  @apply bg-primary-light;
+}

platform/ui/src/components/CinePlayer/index.js

@@ -0,0 +1,2 @@
+import CinePlayer from './CinePlayer';
+export default CinePlayer;