feat(form): LoginFormPage support backgroundVideoUrl

ant-design · Sep 26, 2023 · 6dc50b0 · 6dc50b0
1 parent 86b36b9
commit 6dc50b0
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/packages/form/src/components/LoginForm/demos/login-form-page.tsx b/packages/form/src/components/LoginForm/demos/login-form-page.tsx
@@ -37,6 +37,7 @@ export default () => {
       <LoginFormPage
         backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
         logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
+        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
         title="Github"
         subTitle="全球最大的代码托管平台"
         activityConfig={{

diff --git a/packages/form/src/layouts/LoginFormPage/index.tsx b/packages/form/src/layouts/LoginFormPage/index.tsx
@@ -57,6 +57,12 @@ export type LoginFormPageProps<T> = {
    * @example  backgroundImageUrl="xxx.svg"
    */
   backgroundImageUrl?: string;
+  /**
+   * @name 登录页面的背景视频，可以用它来设置一个背景，优先级高于 backgroundImageUrl
+   *
+   * @example  backgroundImageUrl="xxx.svg"
+   */
+  backgroundVideoUrl?: string;
   children?: React.ReactNode | React.ReactNode[];
 
   containerStyle?: React.CSSProperties;
@@ -73,6 +79,7 @@ export function LoginFormPage<T = Record<string, any>>(
     style,
     activityConfig = {},
     backgroundImageUrl,
+    backgroundVideoUrl,
     title,
     subTitle,
     actions,
@@ -127,9 +134,38 @@ export function LoginFormPage<T = Record<string, any>>(
       className={classNames(baseClassName, hashId)}
       style={{
         ...style,
+        position: 'relative',
         backgroundImage: `url("${backgroundImageUrl}")`,
       }}
     >
+      {backgroundVideoUrl ? (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            overflow: 'hidden',
+            height: '100%',
+            zIndex: 1,
+            pointerEvents: 'none',
+          }}
+        >
+          <video
+            src={backgroundVideoUrl}
+            controls={false}
+            autoPlay
+            loop
+            muted={true}
+            crossOrigin="anonymous"
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+        </div>
+      ) : null}
       <div className={getCls('notice')}>
         {activityConfig && (
           <div

diff --git a/packages/form/src/layouts/LoginFormPage/style.ts b/packages/form/src/layouts/LoginFormPage/style.ts
@@ -21,6 +21,7 @@ const genLoginFormStyle: GenerateStyle<LoginFormToken> = (token) => {
       '&-notice': {
         display: 'flex',
         flex: '1',
+        zIndex: 99,
         alignItems: 'flex-end',
         '&-activity': {
           marginBlock: 24,
@@ -35,6 +36,7 @@ const genLoginFormStyle: GenerateStyle<LoginFormToken> = (token) => {
       '&-left': {
         display: 'flex',
         flex: '1',
+        zIndex: 99,
         flexDirection: 'column',
         maxWidth: '550px',
         paddingInline: 0,
@@ -49,7 +51,7 @@ const genLoginFormStyle: GenerateStyle<LoginFormToken> = (token) => {
         backgroundSize: '100%',
         backgroundPosition: 'top',
         backdropFilter: 'blur(10px)',
-        backgroundColor: setAlpha(token.colorBgContainer, 0.6),
+        backgroundColor: setAlpha(token.colorBgContainer, 0.8),
         backgroundImage:
           'radial-gradient(circle at 93% 1e+02%, rgba(22,119,255,0.17) 0%, rgba(255,255,255,0.05) 23%, rgba(255,255,255,0.03) 87%, rgba(22,119,255,0.12) 109%)',
         padding: 32,

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -16255,8 +16255,19 @@ exports[`form demos > 📸 renders ./packages/form/src/components/LoginForm/demo
   >
     <div
       class="ant-pro-form-login-page"
-      style="background-image: url(https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp);"
+      style="position: relative; background-image: url(https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp);"
     >
+      <div
+        style="position: absolute; top: 0px; left: 0px; width: 100%; overflow: hidden; height: 100%; z-index: 1; pointer-events: none;"
+      >
+        <video
+          autoplay=""
+          crossorigin="anonymous"
+          loop=""
+          src="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
+          style="width: 100%; height: 100%; object-fit: cover;"
+        />
+      </div>
       <div
         class="ant-pro-form-login-page-notice"
       >