Merge pull request #1916 from visuddhinanda/agile

video.js 视频宽度随父容器

dashboard/src/components/article/article.css

@@ -71,3 +71,7 @@ h6 {
 .pcd_article video {
   max-width: 90%;
 }
+
+.video-js video {
+  max-width: 100%;
+}

dashboard/src/components/general/VideoPlayer.tsx

@@ -47,7 +47,11 @@ const VideoPlayerWidget = ({ options, onReady }: IProps) => {
 
   return (
     <div data-vjs-player>
-      <div ref={videoRef} className="video-js" />
+      <div
+        ref={videoRef}
+        className="video-js"
+        style={{ width: "unset", height: "unset" }}
+      />
     </div>
   );
 };

dashboard/src/components/template/Article.tsx

@@ -8,7 +8,7 @@ import { useIntl } from "react-intl";
 
 const { Text } = Typography;
 
-export type TDisplayStyle = "modal" | "card" | "toggle" | "link";
+export type TDisplayStyle = "modal" | "card" | "toggle" | "link" | "window";
 interface IWidgetChapterCtl {
   type?: ArticleType;
   id?: string;

dashboard/src/components/template/Video.tsx

@@ -88,11 +88,18 @@ export const VideoCtl = ({ url, title, style = "modal" }: IVideoCtl) => {
       break;
     case "card":
       output = (
-        <Card title={title}>
+        <Card title={title} bodyStyle={{ width: 550, height: 400 }}>
           <Video src={url} />
         </Card>
       );
       break;
+    case "window":
+      output = (
+        <div style={{ width: 550, height: 320 }}>
+          <Video src={url} />
+        </div>
+      );
+      break;
     case "toggle":
       output = (
         <Collapse bordered={false}>