1  import Code from "../../Code";
  2  import Output from "../../Output";
  3  
  4  const U_3ea7194Demo = () => {
  5    return (
  6      <div>
  7        <Code
  8          snippet={`
  9  () => {
 10    const video = document.createElement("video");
 11  
 12    const HDR10 = {
 13      name: "HDR10",
 14      format: 'codecs="hev1.2.4.L153.B0"; eotf="smpte2084"',
 15    };
 16  
 17    const HLG = {
 18      name: "HLG",
 19      format: 'codecs="hev1.2.4.L153.B0"; eotf="arib-std-b67"',
 20    };
 21  
 22    const DolbyVision = {
 23      name: "DolbyVision",
 24      format: 'codecs="dvh1.1"',
 25    };
 26  
 27    const formats = [HDR10, HLG, DolbyVision].reduce(
 28      (acc, curr) =>
 29        video.canPlayType("video/mp4; ".concat(curr.format))
 30          ? (acc.push(curr.name), acc)
 31          : acc,
 32      [] as Array<string>
 33    );
 34  
 35    const isHDR = [
 36      () => window.matchMedia?.("(dynamic-range: high)")?.matches,
 37      () => "HDR" in window.screen,
 38      () => {
 39        const space = window.screen?.colorSpace;
 40        return space === "rec2020" || space === "p3";
 41      },
 42    ].some((fn) => fn());
 43  
 44    return {
 45      supported: formats.length > 0,
 46      formats,
 47      isHDR: isHDR,
 48    };
 49  }
 50          `.trim()}
 51        />
 52  
 53        <Output
 54          generator={() => {
 55            const video = document.createElement("video");
 56  
 57            const HDR10 = {
 58              name: "HDR10",
 59              format: 'codecs="hev1.2.4.L153.B0"; eotf="smpte2084"',
 60            };
 61  
 62            const HLG = {
 63              name: "HLG",
 64              format: 'codecs="hev1.2.4.L153.B0"; eotf="arib-std-b67"',
 65            };
 66  
 67            const DolbyVision = {
 68              name: "DolbyVision",
 69              format: 'codecs="dvh1.1"',
 70            };
 71  
 72            const formats = [HDR10, HLG, DolbyVision].reduce(
 73              (acc, curr) =>
 74                video.canPlayType("video/mp4; ".concat(curr.format))
 75                  ? (acc.push(curr.name), acc)
 76                  : acc,
 77              [] as Array<string>
 78            );
 79  
 80            const isHDR = [
 81              () => window.matchMedia?.("(dynamic-range: high)")?.matches,
 82              () => "HDR" in window.screen,
 83              () => {
 84                // @ts-expect-error
 85                const space = window.screen?.colorSpace;
 86                return space === "rec2020" || space === "p3";
 87              },
 88            ].some((fn) => fn());
 89  
 90            return {
 91              supported: formats.length > 0,
 92              formats,
 93              isHDR: isHDR,
 94            };
 95          }}
 96        />
 97      </div>
 98    );
 99  };
100  
101  export default U_3ea7194Demo;