@vtx/player 0.0.1

package/src/icons/index.tsx

@@ -0,0 +1,518 @@
+import './index.less';
+
+import React, { MouseEventHandler } from 'react';
+
+import Icon from '@ant-design/icons';
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+interface IconProps extends Partial<CustomIconComponentProps> {
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+}
+
+interface ActiveIconProps extends IconProps {
+    active?: boolean;
+}
+
+const PauseSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-711 -629)">
+                <g transform="translate(-192.26 115.214)">
+                    <rect width="3" height="15.4" rx="1.5" transform="translate(909.76 518.086)" />
+                    <rect width="3" height="15.4" rx="1.5" transform="translate(917.76 518.086)" />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const PlaySvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-663 -629)">
+                <path
+                    d="M206.5,108.605a.416.416,0,0,1-.416-.416V95.227a.416.416,0,0,1,.656-.339l9.274,6.481a.416.416,0,0,1,0,.705l-9.274,6.453A.416.416,0,0,1,206.5,108.605Z"
+                    transform="translate(464.965 539.291)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const CaptureSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-711 -629)">
+                <path
+                    d="M88.583,130.224H83.589l-.472-1.181a1.754,1.754,0,0,0-1.511-1.023H78.668a1.754,1.754,0,0,0-1.511,1.023l-.472,1.181H75.363a2.2,2.2,0,0,0-2.2,2.2v8.813a2.2,2.2,0,0,0,2.2,2.2h13.22a2.2,2.2,0,0,0,2.2-2.2v-8.813A2.2,2.2,0,0,0,88.583,130.224Zm-6.61,10.282a3.672,3.672,0,1,1,3.672-3.672A3.672,3.672,0,0,1,81.973,140.506Zm5.141-6.977a.734.734,0,1,1,.734-.734A.734.734,0,0,1,87.114,133.529Z"
+                    transform="translate(641.026 505.268)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const FullScreenSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-860 -680)">
+                <path
+                    d="M65.787,68.768h-3.5a.686.686,0,1,1,0-1.373h3.5V64.169a.686.686,0,0,1,1.373,0V67.4A1.374,1.374,0,0,1,65.787,68.768Zm-9.924,0H52.431A1.374,1.374,0,0,1,51.058,67.4V63.963a.686.686,0,1,1,1.373,0V67.4h3.432a.686.686,0,1,1,0,1.373Zm-4.119-9.679a.686.686,0,0,1-.686-.686V55.039a1.374,1.374,0,0,1,1.373-1.373h3.364a.686.686,0,1,1,0,1.373H52.431V58.4a.686.686,0,0,1-.686.686Zm14.729-.137a.686.686,0,0,1-.686-.686V55.039h-3.5a.686.686,0,0,1,0-1.373h3.5a1.374,1.374,0,0,1,1.373,1.373v3.226A.686.686,0,0,1,66.474,58.952Z"
+                    transform="translate(812.892 630.783)"
+                />
+                <g transform="translate(794.927 616.37)">
+                    <path
+                        d="M211.424,213.827h-7.872a1.229,1.229,0,0,1-1.312-1.128v-6.77a1.229,1.229,0,0,1,1.312-1.128h7.872a1.229,1.229,0,0,1,1.312,1.128v6.77A1.229,1.229,0,0,1,211.424,213.827Z"
+                        transform="translate(-130.415 -133.684)"
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const ExitFullScreenSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-889 -603)">
+                <path
+                    d="M74.507,78.475H69.817a1.405,1.405,0,0,1-1.407-1.407V72.377a1.405,1.405,0,0,1,1.407-1.407h4.691a1.405,1.405,0,0,1,1.407,1.407v4.691A1.405,1.405,0,0,1,74.507,78.475Zm-7.036,4.409a.653.653,0,0,1-.657-.657V80.182a.108.108,0,0,0-.113-.113H64.657a.657.657,0,0,1,0-1.313H66.7a1.425,1.425,0,0,1,1.426,1.426v2.045A.653.653,0,0,1,67.471,82.884Zm-.769-12.2H64.657a.657.657,0,0,1,0-1.313H66.7a.108.108,0,0,0,.113-.113V67.217a.657.657,0,0,1,1.313,0v2.045A1.425,1.425,0,0,1,66.7,70.688Zm13.059,0H77.716a1.425,1.425,0,0,1-1.426-1.426V67.217a.657.657,0,0,1,1.313,0v2.045a.108.108,0,0,0,.113.113h2.045a.657.657,0,0,1,0,1.313Zm-2.815,12.2a.653.653,0,0,1-.657-.657V80.182a1.425,1.425,0,0,1,1.426-1.426h2.045a.657.657,0,0,1,0,1.313H77.716a.108.108,0,0,0-.113.113v2.045A.653.653,0,0,1,76.947,82.884Z"
+                    transform="translate(828.791 540.278)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const VolumeSmallSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-752 -659)">
+                <g transform="translate(-141 38)">
+                    <path
+                        style={{ opacity: '0.25' }}
+                        d="M77.007,120.062a7.285,7.285,0,0,1,0,11.368.624.624,0,1,1-.781-.973,6.037,6.037,0,0,0,0-9.422.624.624,0,1,1,.781-.973Z"
+                        transform="translate(834.56 507.076)"
+                    />
+                    <path
+                        d="M63.1,130.527a1.663,1.663,0,0,1-1.663-1.663v-5.821A1.663,1.663,0,0,1,63.1,121.38h3.326l3.484-3.02a1.663,1.663,0,0,1,2.753,1.257V132.29a1.663,1.663,0,0,1-2.753,1.257l-3.484-3.02Z"
+                        transform="translate(834.56 507.046)"
+                    />
+                    <path
+                        d="M74.672,122.522a4,4,0,0,1,0,6.863.624.624,0,1,1-.685-1.042,2.757,2.757,0,0,0,0-4.779.624.624,0,1,1,.685-1.042Z"
+                        transform="translate(834.56 506.581)"
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const VolumeLargeSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-752 -660)">
+                <g transform="translate(-141 39)">
+                    <path
+                        d="M77.007,120.062a7.285,7.285,0,0,1,0,11.368.624.624,0,1,1-.781-.973,6.037,6.037,0,0,0,0-9.422.624.624,0,1,1,.781-.973Z"
+                        transform="translate(834.56 507.076)"
+                    />
+                    <path
+                        d="M63.1,130.527a1.663,1.663,0,0,1-1.663-1.663v-5.821A1.663,1.663,0,0,1,63.1,121.38h3.326l3.484-3.02a1.663,1.663,0,0,1,2.753,1.257V132.29a1.663,1.663,0,0,1-2.753,1.257l-3.484-3.02Z"
+                        transform="translate(834.56 507.046)"
+                    />
+                    <path
+                        d="M74.672,122.522a4,4,0,0,1,0,6.863.624.624,0,1,1-.685-1.042,2.757,2.757,0,0,0,0-4.779.624.624,0,1,1,.685-1.042Z"
+                        transform="translate(834.56 506.581)"
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const VolumeMutedSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-711 -629)">
+                <path
+                    d="M72.26,118.527a1.663,1.663,0,0,1,.406,1.089V132.29a1.663,1.663,0,0,1-2.753,1.257l-3.484-3.02H63.1a1.663,1.663,0,0,1-1.663-1.663v-5.821a1.663,1.663,0,0,1,1.663-1.663h3.326l3.484-3.02A1.663,1.663,0,0,1,72.26,118.527Zm7.292,4.78a.624.624,0,0,1,0,.881l-1.763,1.763,1.763,1.763a.624.624,0,1,1-.881.881l-1.763-1.763L75.144,128.6a.624.624,0,0,1-.881-.881l1.763-1.763-1.763-1.763a.624.624,0,1,1,.881-.882l1.763,1.763,1.763-1.763a.624.624,0,0,1,.881,0Z"
+                    transform="translate(652.56 515.047)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const SettingsSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-711 -629)">
+                <path
+                    d="M169.26,145.115l-1.347-1.37a6.122,6.122,0,0,0,.03-.621,6.191,6.191,0,0,0-.03-.621l1.345-1.37a.854.854,0,0,0,.314-1.164l-1.278-2.215a.854.854,0,0,0-1.164-.314l-1.86.479a6.419,6.419,0,0,0-1.074-.621l-.513-1.846a.854.854,0,0,0-.852-.852h-2.561a.854.854,0,0,0-.852.852L158.9,137.3a6.394,6.394,0,0,0-1.074.621l-1.86-.479a.852.852,0,0,0-1.164.314l-1.274,2.215a.852.852,0,0,0,.314,1.164l1.345,1.37a6.117,6.117,0,0,0-.03.621,6.215,6.215,0,0,0,.03.621l-1.345,1.37a.854.854,0,0,0-.314,1.164l1.278,2.215a.854.854,0,0,0,1.164.314l1.86-.479a6.418,6.418,0,0,0,1.074.621l.513,1.851a.854.854,0,0,0,.852.852h2.559a.854.854,0,0,0,.852-.852l.513-1.851a6.394,6.394,0,0,0,1.074-.621l1.858.479a.852.852,0,0,0,1.164-.314l1.278-2.215A.858.858,0,0,0,169.26,145.115Zm-7.709.994a2.985,2.985,0,1,1,2.985-2.985A2.987,2.987,0,0,1,161.552,146.109Z"
+                    transform="translate(561.449 497.871)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const CloseAllSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(1 2)">
+                <path
+                    d="M147.521,153.182h0Zm6.916-5.215-.849-.849-2.607,2.607-2.607-2.607-.852.849,2.61,2.607-2.607,2.607.849.852,2.607-2.607,2.607,2.607.849-.849-2.607-2.61Zm-12.98,3.11v-9.235h10.373v4.147h1.2v-5.351H140.257v11.643h5.319v-1.2h-4.118ZM138.2,138.645h10.368v1.033h1.2v-2.235H137v12.715h2.274v-1.2H138.2Z"
+                    transform="translate(-134.719 -134.739)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const ExpandSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(2 3)">
+                <path
+                    d="M.16,14.318A.162.162,0,0,1,0,14.155V13.017a.162.162,0,0,1,.16-.163H15.837a.162.162,0,0,1,.16.163v1.138a.162.162,0,0,1-.16.163Zm5.759-4.271a.162.162,0,0,1-.16-.162V8.745a.162.162,0,0,1,.16-.163h9.6a.162.162,0,0,1,.16.163V9.885a.162.162,0,0,1-.16.162ZM0,9.663V4.656a.177.177,0,0,1,.288-.14l3.125,2.5a.18.18,0,0,1,0,.281L.29,9.8a.173.173,0,0,1-.11.039A.179.179,0,0,1,0,9.663ZM5.919,5.736a.162.162,0,0,1-.16-.163V4.433a.162.162,0,0,1,.16-.162h9.6a.162.162,0,0,1,.16.162V5.573a.162.162,0,0,1-.16.163ZM.16,1.464A.162.162,0,0,1,0,1.3V.163A.162.162,0,0,1,.16,0H15.837A.162.162,0,0,1,16,.163V1.3a.162.162,0,0,1-.16.163Z"
+                    transform="translate(2.501 1.8)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const FoldSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(2 3)">
+                <path
+                    d="M.16,14.318A.161.161,0,0,1,0,14.155V13.016a.162.162,0,0,1,.16-.163H15.838a.163.163,0,0,1,.16.163v1.139a.162.162,0,0,1-.16.163Zm5.759-4.271a.161.161,0,0,1-.16-.163V8.745a.162.162,0,0,1,.16-.163h9.6a.162.162,0,0,1,.16.163V9.884a.161.161,0,0,1-.16.163ZM3.194,9.8.068,7.3a.18.18,0,0,1,0-.281l3.126-2.5a.177.177,0,0,1,.288.141V9.662a.179.179,0,0,1-.178.18A.172.172,0,0,1,3.194,9.8ZM5.919,5.736a.162.162,0,0,1-.16-.163V4.434a.161.161,0,0,1,.16-.163h9.6a.161.161,0,0,1,.16.163V5.573a.162.162,0,0,1-.16.163ZM.16,1.464A.162.162,0,0,1,0,1.3V.163A.161.161,0,0,1,.16,0H15.838A.162.162,0,0,1,16,.163V1.3a.163.163,0,0,1-.16.163Z"
+                    transform="translate(2.501 1.8)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+const Grid1x1Svg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-939 -98)">
+                <g transform="translate(18.5)">
+                    <path
+                        d="M21,18H0V0H21V18ZM.914,1V17H20.085V1Z"
+                        transform="translate(922 101.001)"
+                    />
+                    <rect width="16.998" height="14" transform="translate(924 103)" />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const Grid2x2Svg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-954 -98)">
+                <g transform="translate(-0.5)">
+                    <path
+                        d="M21,18H0V0H21V18ZM.914,1V17H20.085V1Z"
+                        transform="translate(956 101)"
+                    />
+                    <rect width="8" height="6.5" transform="translate(958 103)" />
+                    <rect width="8" height="6.5" transform="translate(958 110.5)" />
+                    <rect width="7.998" height="6.5" transform="translate(967 103)" />
+                    <rect width="7.998" height="6.5" transform="translate(967 110.5)" />
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+const Grid3x3Svg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <defs>
+                <style></style>
+            </defs>
+            <g transform="translate(-954.5 -98)">
+                <path
+                    d="M21,18H0V0H21V18ZM.914,1V17H20.085V1Z"
+                    transform="translate(955.999 101)"
+                />
+                <rect width="5" height="4" transform="translate(958 103)" />
+                <rect width="5" height="4" transform="translate(958 108)" />
+                <rect width="5" height="4" transform="translate(958 113)" />
+                <rect width="5" height="4" transform="translate(964 103)" />
+                <rect width="5" height="4" transform="translate(964 108)" />
+                <rect width="5" height="4" transform="translate(964 113)" />
+                <rect width="5" height="4" transform="translate(970 103)" />
+                <rect width="5" height="4" transform="translate(970 108)" />
+                <rect width="5" height="4" transform="translate(970 113)" />
+            </g>
+        </svg>
+    );
+};
+
+const CloseSvg = () => {
+    return (
+        <svg viewBox="64 64 896 896" focusable="false">
+            <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />
+        </svg>
+    );
+};
+const VideoPlaySvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+            <path
+                d="M206.363,104.212a.284.284,0,0,1-.284-.284V95.1a.284.284,0,0,1,.447-.231l6.32,4.417a.284.284,0,0,1,0,.481l-6.32,4.4A.284.284,0,0,1,206.363,104.212Z"
+                transform="translate(-201.597 -92.334)"
+            />
+        </svg>
+    );
+};
+const VideoCloseSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+            <path
+                d="M5.042,4.457,8.631.179A.109.109,0,0,0,8.548,0H7.457a.223.223,0,0,0-.168.078L4.329,3.607,1.369.078A.218.218,0,0,0,1.2,0H.109A.109.109,0,0,0,.026.179L3.615,4.457.026,8.735a.109.109,0,0,0,.083.179H1.2a.223.223,0,0,0,.168-.078l2.96-3.529,2.96,3.529a.218.218,0,0,0,.168.078H8.548a.109.109,0,0,0,.083-.179Z"
+                transform="translate(2.666 2.543)"
+            />
+        </svg>
+    );
+};
+
+const TimePositionSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="7" height="35" viewBox="0 0 7 35">
+            <defs>
+                <style></style>
+            </defs>
+            <g transform="translate(-572 -861)">
+                <path
+                    style={{ fill: '#177ddc' }}
+                    d="M3.5,0,7,4H0Z"
+                    transform="translate(579 865) rotate(180)"
+                />
+                <path
+                    style={{ fill: '#177ddc' }}
+                    d="M3.5,0,7,4H0Z"
+                    transform="translate(572 892)"
+                />
+                <line style={{ stroke: '#177ddc' }} y2="29" transform="translate(575.5 863.5)" />
+            </g>
+        </svg>
+    );
+};
+
+const TalkDisableSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <g transform="translate(-1818 -474)">
+                <path
+                    d="M130,10.815l-.873.873a5.333,5.333,0,0,1-.208-.616.58.58,0,0,1-.019-.143V8.482a.556.556,0,0,1,.531-.558.546.546,0,0,1,.562.546v2.217A1.072,1.072,0,0,0,130,10.815Zm1.883,1.166-.755.755a4.264,4.264,0,0,0,7-1.7,1.084,1.084,0,0,0,.056-.347v-2.2a.556.556,0,0,1,.531-.558.546.546,0,0,1,.562.546V10.93a.59.59,0,0,1-.019.143,5.37,5.37,0,0,1-4.5,3.912.136.136,0,0,0-.12.135v1a.274.274,0,0,0,.273.273h1.366a1.093,1.093,0,0,1,1.093,1.093h-6.559a1.09,1.09,0,0,1,1.093-1.093h1.366a.274.274,0,0,0,.273-.273v-1a.136.136,0,0,0-.12-.135,5.357,5.357,0,0,1-3.068-1.479l-1.9,1.9a.544.544,0,0,1-.772,0,.547.547,0,0,1,0-.774l1.965-1.964.791-.791.763-.763.825-.825,7.541-7.541a.547.547,0,1,1,.774.774l-2.975,2.973V9.563a3.274,3.274,0,0,1-5.486,2.418Zm5.486-8.7v.166l-6.531,6.532a3.292,3.292,0,0,1-.026-.413V3.279a3.279,3.279,0,1,1,6.557,0Z"
+                    transform="translate(1695.986 477.256)"
+                />
+            </g>
+        </svg>
+    );
+};
+const TalkSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <defs>
+                <style></style>
+            </defs>
+            <g transform="translate(-1772 -526)">
+                <g transform="translate(1779 529)">
+                    <path
+                        d="M326.557,3.279V9.563a3.279,3.279,0,1,1-6.557,0V3.279a3.279,3.279,0,1,1,6.557,0Z"
+                        transform="translate(-318.088)"
+                    />
+                    <path
+                        d="M218.382,464.534v2.459a.59.59,0,0,1-.019.143,5.37,5.37,0,0,1-4.506,3.912.136.136,0,0,0-.12.135v1a.274.274,0,0,0,.273.273h1.366a1.094,1.094,0,0,1,1.093,1.093h-6.557a1.094,1.094,0,0,1,1.093-1.093h1.366a.274.274,0,0,0,.273-.273v-1a.136.136,0,0,0-.12-.135,5.373,5.373,0,0,1-4.506-3.914.58.58,0,0,1-.019-.143v-2.447a.556.556,0,0,1,.531-.558.546.546,0,0,1,.562.546v2.217a1.085,1.085,0,0,0,.056.347,4.266,4.266,0,0,0,8.084,0,1.084,1.084,0,0,0,.056-.347v-2.2a.556.556,0,0,1,.531-.558A.546.546,0,0,1,218.382,464.534Z"
+                        transform="translate(-208.001 -456.064)"
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};
+const CloudControlSvg = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <defs>
+                <style></style>
+            </defs>
+            <g transform="translate(-1847 -503)">
+                <path
+                    d="M79.3,67.036l-3.722,3.718a3.474,3.474,0,0,1,0,3.857L79.3,78.328A8.684,8.684,0,0,0,79.3,67.036Zm-1.683,7.357V70.9l2.155,1.78ZM69.8,70.759l-3.718-3.718a8.7,8.7,0,0,0,0,11.3L69.8,74.615A3.482,3.482,0,0,1,69.8,70.759Zm-2.409,3.635-2.155-1.711,2.155-1.748v3.459Zm3.371,1.184-3.718,3.718a8.7,8.7,0,0,0,11.3,0l-3.718-3.718A3.473,3.473,0,0,1,70.764,75.577Zm1.91,4.028-1.817-2.15h3.769ZM74.621,69.8l3.722-3.722a8.7,8.7,0,0,0-11.3,0L70.764,69.8A3.482,3.482,0,0,1,74.621,69.8ZM72.7,65.617l1.956,2.15H70.991Z"
+                    transform="translate(1786.307 442.315)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+/** 暂停Icon */
+export const PauseIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={PauseSvg} {...props} />
+);
+
+/** 播放Icon */
+export const PlayIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={PlaySvg} {...props} />
+);
+
+/** 截图Icon */
+export const CaptureIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={CaptureSvg} {...props} />
+);
+
+/** 全屏Icon */
+export const FullScreenIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={FullScreenSvg} {...props} />
+);
+
+/** 退出全屏Icon */
+export const ExitFullScreenIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={ExitFullScreenSvg} {...props} />
+);
+
+/** 音量低Icon */
+export const VolumeSmallIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={VolumeSmallSvg} {...props} />
+);
+
+/** 音量高Icon */
+export const VolumeLargeIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={VolumeLargeSvg} {...props} />
+);
+/** 静音Icon */
+export const VolumeMutedIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={VolumeMutedSvg} {...props} />
+);
+
+/** 设置Icon */
+export const SettingsIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={SettingsSvg} {...props} />
+);
+
+/** 关闭全部Icon */
+export const CloseAllIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={CloseAllSvg} {...props} />
+);
+
+/** 展开Icon */
+export const ExpandIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={ExpandSvg} {...props} />
+);
+
+/** 收缩Icon */
+export const FoldIcon = (props: IconProps) => (
+    <Icon className="control-icon" component={FoldSvg} {...props} />
+);
+
+/** 停止对讲Icon */
+export const TalkDisableIcon = (props: ActiveIconProps) => {
+    const { active = false } = props;
+    return (
+        <Icon
+            className={`control-icon ${active ? 'active' : ''}`}
+            component={TalkDisableSvg}
+            {...props}
+        />
+    );
+};
+
+/** 对讲Icon */
+export const TalkIcon = (props: ActiveIconProps) => {
+    const { active = false } = props;
+    return (
+        <Icon className={`control-icon ${active ? 'active' : ''}`} component={TalkSvg} {...props} />
+    );
+};
+
+/** 云台控制 */
+export const CloudControlIcon = (props: ActiveIconProps) => {
+    const { active = false } = props;
+    return (
+        <Icon
+            className={`control-icon ${active ? 'active' : ''}`}
+            component={CloudControlSvg}
+            {...props}
+        />
+    );
+};
+
+/** 1x1网格Icon */
+export const Grid1x1Icon = (props: ActiveIconProps) => {
+    const { active = false } = props;
+    return (
+        <Icon
+            className={`control-icon ${active ? 'active' : ''}`}
+            component={Grid1x1Svg}
+            {...props}
+        />
+    );
+};
+
+/** 2x2网格Icon */
+export const Grid2x2Icon = (props: ActiveIconProps) => {
+    const { active = false } = props;
+    return (
+        <Icon
+            className={`control-icon ${active ? 'active' : ''}`}
+            component={Grid2x2Svg}
+            {...props}
+        />
+    );
+};
+
+/** 3x3网格Icon */
+export const Grid3x3Icon = (props: ActiveIconProps) => {
+    const { active = false } = props;
+    return (
+        <Icon
+            className={`control-icon ${active ? 'active' : ''}`}
+            component={Grid3x3Svg}
+            {...props}
+        />
+    );
+};
+
+/** 关闭Icon */
+export const CloseIcon = (props: IconProps) => {
+    return <Icon className={`close-icon`} component={CloseSvg} {...props} />;
+};
+
+/** 视频播放Icon */
+export const VideoPlayIcon = (props: ActiveIconProps) => {
+    const { active = false } = props;
+    return (
+        <Icon
+            className={`control-icon ${active ? 'active' : ''}`}
+            component={VideoPlaySvg}
+            {...props}
+        />
+    );
+};
+
+/** 视频关闭Icon */
+export const VideoCloseIcon = (props: ActiveIconProps) => {
+    const { active = false } = props;
+    return (
+        <Icon
+            className={`control-icon ${active ? 'active' : ''}`}
+            component={VideoCloseSvg}
+            {...props}
+        />
+    );
+};
+
+/** 时间刻度Icon */
+export const TimePositionIcon = (props: IconProps) => {
+    return <Icon component={TimePositionSvg} {...props} />;
+};

package/src/main.ts

@@ -0,0 +1,9 @@
+import 'antd/dist/antd.css';
+
+export { default as Player } from './components/player';
+export { default as LivePlayer } from './components/live-player';
+export { default as HistoryPlayer } from './components/history-player';
+export { default as LiveControl } from './components/live-control';
+export { default as HistoryControl } from './components/history-control';
+export { default as BillPlayer } from './components/bill-player';
+export { default as LiveChannelPlayer } from './components/live-channel-player';

package/src/stories/intro.stories.mdx

@@ -0,0 +1,16 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Alert } from 'antd';
+
+<Meta title="介绍" />
+
+# @vtx/player
+基于业务的React视频流播放器
+
+## 包含的组件
+- 实时视频播放器
+- 历史视频播放器
+- 实时视频控制器
+- 历史视频控制器
+- 业务播放器
+
+## FAQ

package/src/typings/@vtx/utils/index.d.ts

@@ -0,0 +1,27 @@
+declare class Result<T> {
+    /** 数据 */
+    data: T;
+    /** 异常 */
+    exception: unknown;
+    /** 信息 */
+    msg: string;
+    /** 0为成功，1为失败 */
+    result: 0 | 1;
+    /** 时间戳 */
+    timestamp: number;
+}
+
+declare class ArrayResult<T> {
+    rows: T[];
+    total: number;
+}
+
+declare module '@vtx/utils' {
+    export const request: {
+        get: <T>(url: string, options?: { data: unknown; timeout?: number }) => Promise<T>;
+        post: <T>(
+            url: string,
+            options?: { data: unknown; timeout?: number; extraHeader?: unknown }
+        ) => Promise<T>;
+    };
+}