@ldelia/react-media 0.2.8 → 0.4.0

package/tsconfig.json

@@ -1,13 +1,14 @@
 {
   "compilerOptions": {
     "target": "ES6",
-    "module": "commonjs",
-    "declaration": true,
-    "outDir": "./dist",
-    "strict": true,
+    "module": "ESNext",
     "jsx": "react",
+    "strict": true,
+    "moduleResolution": "node",
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["src"]
-}
+  "include": ["src", ".storybook", "src/react-docgen-types.d.ts"]
+}

package/.storybook/main.ts

@@ -1,18 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from "@storybook/react";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/dist/components/timeline/RangeSelectorCanvas.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface RangeSelectorCanvasProps {
-    selectedRange: number[];
-    onChange: (value: number) => void;
-    onRangeChange: (value: number[]) => void;
-}
-declare const _default: React.NamedExoticComponent<RangeSelectorCanvasProps>;
-export default _default;

package/dist/components/timeline/TickTime.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type Props = {
-    start: number;
-    leftPosition: string;
-};
-declare const TickTime: React.FC<Props>;
-export default TickTime;

package/dist/components/timeline/TickTime.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const TickTimeContainer = styled_components_1.default.span.attrs((props) => ({
-    style: {
-        left: props.left,
-    },
-})) `
-  background: transparent;
-  position: absolute;
-  padding-left: 8px;
-  color: #646464;
-  user-select: none;
-  min-width: 20px;
-  max-width: 20px;
-  align-self: flex-end;
-`;
-const TickTime = ({ start, leftPosition }) => {
-    const minutes = Math.floor(start / 60);
-    let seconds = start - minutes * 60;
-    let secondsFormatted = seconds < 10 ? '0' + seconds : seconds.toString();
-    return (react_1.default.createElement(TickTimeContainer, { left: leftPosition, className: 'media-timeline-tick-time' },
-        minutes,
-        ":",
-        secondsFormatted));
-};
-exports.default = TickTime;

package/dist/components/timeline/TickTimeCollectionDisplay.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface TickTimeCollectionDisplayProps {
-    tickTimes: number[];
-}
-declare const TickTimeCollectionDisplay: React.FC<TickTimeCollectionDisplayProps>;
-export default TickTimeCollectionDisplay;

package/dist/components/timeline/TickTimeCollectionDisplay.js

@@ -1,24 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const TickTime_1 = __importDefault(require("./TickTime"));
-const index_1 = require("./index");
-const TickTimeCollectionDisplayContainer = styled_components_1.default.div `
-  position: absolute;
-  display: flex;
-  align-self: flex-end;
-  height: 100%;
-`;
-const TickTimeCollectionDisplay = ({ tickTimes = [], }) => {
-    return (react_1.default.createElement(index_1.ZoomContext.Consumer, null, (value) => {
-        return (react_1.default.createElement(TickTimeCollectionDisplayContainer, null, tickTimes.map((tickTimeValue, index) => {
-            const leftPosition = tickTimeValue * value.pixelsInSecond + 'px';
-            return (react_1.default.createElement(TickTime_1.default, { key: index, start: tickTimeValue, leftPosition: leftPosition }));
-        })));
-    }));
-};
-exports.default = TickTimeCollectionDisplay;

package/dist/components/timeline/VaLueLineCanvas.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface VaLueLineCanvasProps {
-    blockStartingTimes: number[];
-    value: number;
-}
-declare const VaLueLineCanvas: React.FC<VaLueLineCanvasProps>;
-export default VaLueLineCanvas;

package/dist/components/timeline/VaLueLineCanvas.js

@@ -1,111 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const index_1 = require("./index");
-const utils_1 = require("./utils/utils");
-const OverlayCanvas = styled_components_1.default.canvas `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  color: #c9c9c9;
-`;
-const PreValueLine = styled_components_1.default.span `
-  position: absolute;
-  left: 0;
-  height: 100%;
-`;
-const ValueLine = styled_components_1.default.span `
-  position: absolute;
-  width: 1px;
-  height: 100%;
-  background-color: #575757;
-`;
-const PostValueLine = styled_components_1.default.span `
-  position: absolute;
-  height: 100%;
-`;
-const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
-    const canvasRef = (0, react_1.useRef)(null);
-    const preValueLineRef = (0, react_1.useRef)(null);
-    const valueLineRef = (0, react_1.useRef)(null);
-    const postValueLineRef = (0, react_1.useRef)(null);
-    const zoomContextValue = (0, react_1.useContext)(index_1.ZoomContext);
-    const showBlocks = (0, react_1.useCallback)((canvas) => {
-        const blockHeight = 20;
-        const context = canvas.getContext('2d');
-        for (const blockStartingTime of blockStartingTimes) {
-            const x0Pixel = (0, utils_1.secondsToPixel)(zoomContextValue, blockStartingTime);
-            const x1Pixel = (0, utils_1.secondsToPixel)(zoomContextValue, blockStartingTime + zoomContextValue.blockOffset);
-            context.beginPath();
-            context.moveTo(x0Pixel, canvas.height);
-            context.lineTo(x0Pixel, canvas.height - blockHeight);
-            context.lineTo(x1Pixel, canvas.height - blockHeight);
-            context.lineTo(x1Pixel, canvas.height);
-            context.strokeStyle = window
-                .getComputedStyle(canvas)
-                .getPropertyValue('color');
-            context.stroke();
-        }
-    }, [blockStartingTimes, zoomContextValue]);
-    const showValueLine = (0, react_1.useCallback)(() => {
-        const canvas = canvasRef.current;
-        const preValueLineElement = preValueLineRef.current;
-        const valueLineElement = valueLineRef.current;
-        const postValueLineElement = postValueLineRef.current;
-        const valueLineWidth = (0, utils_1.getComputedElementWidth)(valueLineElement);
-        const linePosition = (0, utils_1.secondsToPixel)(zoomContextValue, value);
-        const valueLinePositionBeginningConsideringWidth = linePosition - valueLineWidth / 2;
-        // configure preValueLineElement
-        preValueLineElement.style.width = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
-        // configure valueLineElement
-        valueLineElement.style.left = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
-        // configure postValueLineElement
-        const postValueLinePosition = valueLinePositionBeginningConsideringWidth + valueLineWidth;
-        const postValueLineWidth = canvas.width - postValueLinePosition;
-        postValueLineElement.style.left = (0, utils_1.numberToPxString)(postValueLinePosition);
-        postValueLineElement.style.width = (0, utils_1.numberToPxString)(postValueLineWidth);
-    }, [value, zoomContextValue]);
-    (0, react_1.useEffect)(() => {
-        const canvas = canvasRef.current;
-        // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
-        canvas.width = canvas.offsetWidth;
-        canvas.height = canvas.offsetHeight;
-        showBlocks(canvas);
-        showValueLine();
-    }, [showBlocks, showValueLine]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(OverlayCanvas, { ref: canvasRef, className: 'media-timeline-value-line-canvas' }),
-        react_1.default.createElement(PreValueLine, { ref: preValueLineRef, className: 'media-timeline-pre-value-line' }),
-        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' }),
-        react_1.default.createElement(PostValueLine, { ref: postValueLineRef, className: 'media-timeline-post-value-line' })));
-};
-exports.default = VaLueLineCanvas;

package/dist/reportWebVitals.d.ts

@@ -1,3 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
-export default reportWebVitals;

package/dist/reportWebVitals.js

@@ -1,37 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const reportWebVitals = (onPerfEntry) => {
-    if (onPerfEntry && onPerfEntry instanceof Function) {
-        Promise.resolve().then(() => __importStar(require('web-vitals'))).then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-            getCLS(onPerfEntry);
-            getFID(onPerfEntry);
-            getFCP(onPerfEntry);
-            getLCP(onPerfEntry);
-            getTTFB(onPerfEntry);
-        });
-    }
-};
-exports.default = reportWebVitals;

package/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;