@conecli/cone-render 0.8.19 → 0.8.20-beta.0

package/dist/common/index.jd.ts

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  public config: object 
    this.config = {}
    return new Promise((resolve, reject) => {
      if (typeof jd !== 'undefined' && jd.requestWebCookie) {
        jd.requestWebCookie({
          needpin: 1, 
          success: (res) => {
            console.log(res)
            const { ticket, pt_pin } = res
            console.log('requestWebCookie.success', res)
            this.info.userInfo = {
              pin: pt_pin,
              encodePin: encodeURIComponent(pt_pin),
              ptkey: ticket,
            }
            this.miniAppLogInstance &&
            this.miniAppLogInstance.set({
              account: pt_pin,
            })
            this.info.loginState = true
            resolve(res)
          },
          fail(res) {
            console.log('requestWebCookie.fail', res)
           reject(res)
          },
        })
      } else {
        resolve({
          pin: '',
          ptkey: '',
          mock: true
        })
      }
    })
          this.checkLoginStatus().then(res => {
            console.log(
              'jdLoadCheckStatusAndLogin hasUserLogined.success: ',
              res,
            )
            resolve(res)
          }).catch(err => {
            console.warn(
              'jdLoadCheckStatusAndLogin hasUserLogined.fail: ',
              err,
            )
            this.toLogin().then(res => {
              resolve(res)
            }).catch(err => {
              reject(err)
            })
          })
    return new Promise((resolve,reject) => {
      if (typeof jd !== 'undefined' && jd.hasUserLogined) {
        jd.hasUserLogined({
          success: (res) => {
            console.log('hasUserLogined.success: ', res)
            if (res.status === 1) {
              this.getLoginCookie()
              resolve(res)
            }else {
              reject(res)
            }
          },
          fail: (res) => {
            console.warn('hasUserLogined.fail: ', res)
            reject(res)
          },
        })
      } else {
        reject(false)
      }
    })
+import Taro from '@tarojs/taro'
  public config: object 
    this.config = {}
    return new Promise((resolve, reject) => {
      if (typeof jd !== 'undefined' && jd.requestWebCookie) {
        jd.requestWebCookie({
          needpin: 1, 
          success: (res) => {
            console.log(res)
            const { ticket, pt_pin } = res
            console.log('requestWebCookie.success', res)
            this.info.userInfo = {
              pin: pt_pin,
              encodePin: encodeURIComponent(pt_pin),
              ptkey: ticket,
            }
            this.miniAppLogInstance &&
            this.miniAppLogInstance.set({
              account: pt_pin,
            })
            this.info.loginState = true
            resolve(res)
          },
          fail(res) {
            console.log('requestWebCookie.fail', res)
           reject(res)
          },
        })
      } else {
        resolve({
          pin: '',
          ptkey: '',
          mock: true
        })
      }
    })
          this.checkLoginStatus().then(res => {
            console.log(
              'jdLoadCheckStatusAndLogin hasUserLogined.success: ',
              res,
            )
            resolve(res)
          }).catch(err => {
            console.warn(
              'jdLoadCheckStatusAndLogin hasUserLogined.fail: ',
              err,
            )
            this.toLogin().then(res => {
              resolve(res)
            }).catch(err => {
              reject(err)
            })
          })
    return this.checkStatusAndLoginPromise
    return new Promise((resolve,reject) => {
      if (typeof jd !== 'undefined' && jd.hasUserLogined) {
        jd.hasUserLogined({
          success: (res) => {
            console.log('hasUserLogined.success: ', res)
            if (res.status === 1) {
              this.getLoginCookie()
              resolve(res)
            }else {
              reject(res)
            }
          },
          fail: (res) => {
            console.warn('hasUserLogined.fail: ', res)
            reject(res)
          },
        })
      } else {
        reject(false)
      }
    })

package/dist/common/isvStorage/index.h5.ts

@@ -0,0 +1 @@
+const ISV_GLOBAL_CACHE_KEY = '_isvGlobalStorage'
  if (!key) {
    console.error('setItem key cannot be empty or null')
    return
  }
  console.log('setItem key:', key, value)
  let globalCache = window[ISV_GLOBAL_CACHE_KEY]
  if (!globalCache) {
    globalCache = {}
    window[ISV_GLOBAL_CACHE_KEY] = globalCache
  }
  globalCache[key] = value
  if (!key) {
    console.error('getItem key cannot be empty or null')
    return
  }
  console.log('getItem key:', key)
  let globalCache = window[ISV_GLOBAL_CACHE_KEY] || {}
  const value: any = globalCache[key]
  return value
  if (!key) {
    console.error('removeItem key cannot be empty or null')
    return
  }
  console.log('removeItem key:', key)
  let globalCache = window[ISV_GLOBAL_CACHE_KEY]
  if (globalCache) {
    delete globalCache[key]
  }

package/dist/common/isvStorage/index.ts

@@ -0,0 +1 @@
+export function setItem(key: string, value: any): void {
  console.log('setItem 暂未实现')
  console.log('getItem 暂未实现')
  console.log('removeItem 暂未实现')

package/dist/common/token/const.ts

@@ -0,0 +1 @@
+export const TokenPlatform = {
  TYPE_JDAPP: '01', 
  TYPE_WQ: '02', 
  TYPE_M: '03', 
  TYPE_OTHER: '-1', 
  TYPE_ISVDEV: 'isvdev', 
  TYPE_ISV_PACK_SAMPLE: 'isvPackSample', 
  TYPE_ZXDESIGNER: 'zxdesigner', 
  TYPE_JSHOPX: 'jshopx', 
  TYPE_PAGES: 'pages', 

package/dist/common/token/index.h5.ts

@@ -0,0 +1 @@
+import { isApp } from '../../utils/jm-common'
  return new Promise((resolve, reject) => {
    let platform: string = getPlatform()
    if (platform === TokenPlatform.TYPE_JDAPP) {
      ready('jmfe', 3000)
        .then(() => {
          console.log('window.jmfe已经存在：', jmfe)
          import('./token.jd')
            .then((data) => {
              console.log('data:', data)
              resolve(data)
            })
            .catch((err) => {
              reject(err)
            })
        })
        .catch((e) => {
          console.log('window.jmfe不存在')
          reject(e)
        })
    }
    else if (platform === TokenPlatform.TYPE_WQ) {
      import('./token.wxapp')
        .then((data) => {
          console.log('data:', data)
          resolve(data)
        })
        .catch((err) => {
          reject(err)
        })
    } else {
      import('./token')
        .then((data) => {
          console.log('data:', data)
          resolve(data)
        })
        .catch((err) => {
          reject(err)
        })
    }
  })
  console.log(e);
  return {}
  return new Promise((resolve) => {
    loadTokenPromise
      .then((proxy: any) => {
        if (proxy?.isLogin) {
          proxy?.isLogin().then((data: boolean) => {
            resolve(data)
          })
        } else {
          resolve(false)
        }
      })
      .catch((err) => {
        resolve(false)
      })
  })
  return new Promise((resolve) => {
    loadTokenPromise
      .then((proxy: any) => {
        if (proxy?.getIsvToken) {
          proxy?.getIsvToken().then((data: string) => {
            resolve(data)
          })
        } else {
          resolve('')
        }
      })
      .catch((err) => {
        resolve('')
      })
  })
  return new Promise((resolve) => {
    loadTokenPromise
      .then((proxy: any) => {
        if (proxy?.toLogin) {
          proxy?.toLogin(options)
          resolve(true)
        } else {
          resolve(false)
        }
      })
      .catch((err) => {
        resolve(false)
      })
  })
  let platform = TokenPlatform.TYPE_M
  if (isApp('jd')) {
    platform = TokenPlatform.TYPE_JDAPP
  }
  else if (isApp('wx') && isApp('mp')) {
    platform = TokenPlatform.TYPE_WQ
  }
  return platform
  let platform = getPlatform()
  let source = platform
  if (platform === TokenPlatform.TYPE_M || platform === TokenPlatform.TYPE_WQ) {
    source = TokenPlatform.TYPE_JDAPP
  }
  return source
  return window?.page_data?.pageChannel || ''

package/dist/common/token/index.ts

@@ -0,0 +1 @@
+import { TokenPlatform } from './const'
  return new Promise((resolve) => {
    console.log('isLogin暂未实现')
    resolve(false)
  })
  return new Promise((resolve) => {
    console.log('getIsvToken暂未实现')
    resolve('')
  })
  return new Promise((resolve) => {
    console.log('toLogin暂未实现')
    resolve(false)
  })
  return TokenPlatform.TYPE_OTHER
  return ''
  return ''

package/dist/common/token/token.jd.ts

@@ -0,0 +1 @@
+console.log('load token.jd')
  return new Promise((resolve) => {
    if (jmfe) {
      jmfe.isJDAppLogin().then(({ data }) => {
        if (data === '1') {
          resolve(true)
        } else if (data === '0') {
          resolve(false)
        }
      })
    } else {
      console.warn('jmfe对象不存在，可能没有提前动态引入jd-jssdk.js')
      resolve(false)
    }
  })
  return requestIsvToken(window.location.href)
  if (jmfe) {
    jmfe.toLogin(options)
  } else {
    console.warn('jmfe对象不存在，可能没有提前动态引入jd-jssdk.js')
  }
  if (jmfe) {
    console.log('registerCode:', code)
    jmfe.registerCode(code)
  } else {
    console.warn('jmfe对象不存在，可能没有提前引入jd-jssdk.js')
  }
  return new Promise((resolve) => {
    console.log('requestIsvToken:', url)
    if (jmfe) {
      jmfe
        .requestIsvToken(url)
        .then((result: any) => {
          console.log('requestIsvToken result:' + JSON.stringify(result))
          const { status, data, msg } = result
          if (status === '0') {
            resolve(data || '')
          } else {
            resolve('')
          }
        })
        .catch((e: any) => {
          console.log('requestIsvToken error:' + JSON.stringify(e))
          resolve('')
        })
    } else {
      console.warn('jmfe对象不存在，可能没有提前引入jd-jssdk.js')
      resolve('')
    }
  })

package/dist/common/token/token.ts

@@ -0,0 +1 @@
+import global from '../../common'
  return window?.page_data?.pageChannel || ''
  return new Promise((resolve) => {
    const channel = getPageChannel()
    if (
      channel === PageChannel.TYPE_ISVDEV ||
      channel === PageChannel.TYPE_ISV_PACK_SAMPLE
    ) {
      getIsvToken().then((token) => {
        console.log('isLogin token：' + token)
        if (token) {
          resolve(true)
        } else {
          resolve(false)
        }
      })
    } else {
      global.checkLoginStatus().then(res => {
        resolve(res)
      }).catch(() => {
        resolve(false)
      })
    }
  })
  let token = ''
  const result: any = await getIsvTokenInner()
  if (!result.success) {
    const channel = getPageChannel()
    if (channel === PageChannel.TYPE_ISV_PACK_SAMPLE) {
      console.log('getIsvToken打包校验中获取token失败')
      if (window['isvTokenFailCallback']) {
        window['isvTokenFailCallback'](result.error)
        console.log('浏览器中调用isvTokenFailCallback结束')
      }
    }
  } else {
    token = result.data
  }
  return token
  return new Promise((resolve) => {
    fetchGateway(
      'isvObfuscator',
      {
        url: window.location.href,
        id: 'shopisv',
      },
      {},
    )
      .then((data: any) => {
        console.log('fetchGateway isvObfuscator data:' + JSON.stringify(data))
        if (
          data?.statusCode == 200 &&
          data?.data?.errcode === 0 &&
          data?.data?.token
        ) {
          resolve({
            success: true,
            data: data?.data?.token,
          })
        } else {
          resolve({
            success: false,
            error: data,
          })
        }
      })
      .catch((error: { message: any }) => {
        console.log('fetchGateway isvObfuscator error:' + error.message)
        resolve({
          success: false,
          error,
        })
      })
  })
  const defaultParams = {
    appid: '100',
    returnurl: window.location.href,
  }
  const params = Object.assign({}, defaultParams, options)
  params.returnurl = encodeURIComponent(params.returnurl)
  const loginUrl = `${domain.mobileLogin}/user/login.action?${serialize(
    params,
  )}`
  console.log('loginUrl:', loginUrl)
  window.location.href = loginUrl

package/dist/common/token/token.wxapp.ts

@@ -0,0 +1 @@
+import cookie from '../../utils/jm-cookie'
  return new Promise((resolve) => {
    const token = cookie.get('wq_auth_token')
    resolve(!!token)
  })
  return new Promise((resolve) => {
    const token = cookie.get('wq_auth_token') || ''
    resolve(token)
  })
  return new Promise((resolve) => {
    fetchGateway(
      'isvObfuscator',
      {
        url: window.location.href,
        id: 'shopisv',
      },
      { loginType: 1, loginWQBiz: WXAPP_BIZ_KEY },
    )
      .then((data: any) => {
        console.warn('fetchGateway isvObfuscator data:' + JSON.stringify(data))
        if (
          data?.statusCode == 200 &&
          data?.data?.errcode === 0 &&
          data?.data?.token
        ) {
          resolve(data?.data?.token)
        } else {
          resolve('')
        }
      })
      .catch((e: { message: any }) => {
        console.warn('fetchGateway isvObfuscator error:' + e.message)
        resolve('')
      })
  })
  const returnurl = options?.returnurl || window.location.href
  pinTokenRedirect(WXAPP_BIZ_KEY, returnurl)
  const url = `
  ${domain.wq}/pinbind/pintokenredirect?biz=${biz}&url=${encodeURIComponent(
    targetUrl,
  )}`
  console.log('pinTokenRedirect:', url)
  window.location.href = url

package/dist/components/base/CommonFloorHead/index.module.scss

@@ -105,7 +105,7 @@
 
 .d-title-more {
 	position: relative;
-	top: 18px;
+	top: 16px;
 	display: flex;
 	align-items: flex-end;
 	height: 56px;

package/dist/components/base/CommonFloorHead/index.tsx

@@ -1 +1 @@
-import React, { useMemo } from 'react'
+import React, { useMemo } from 'react'

package/dist/components/base/CustomVideo/const.ts

@@ -0,0 +1 @@
+export const DEFAULT_MUTE_BTN_PIC = {
  IS_MUTED:
    '//img11.360buyimg.com/imagetools/jfs/t1/216103/12/32490/3414/64cb0ba1F51cd0f76/90ec3bc480166942.png',
  NOT_MUTED:
    '//img13.360buyimg.com/imagetools/jfs/t1/107420/15/23323/3356/64cb0ba1F079aeb66/35883b1d6ff460d2.png',

package/dist/components/base/CustomVideo/index.module.scss

@@ -1,66 +1,42 @@
-.d-video-wrap{
-	position: relative;
-	overflow: hidden;
+.d-video-wrap {
+  // 便于静音按钮 相对视频 定位
+  position: relative;
+}
 
-	.d-video-play {
-		display: block;
-		overflow: hidden;
-		width: 100%;
-		height: 100%;
-		background-color: transparent;
-		-webkit-backface-visibility: hidden;
-		-webkit-transform: translate3d(0, 0, 0);
-		object-fit: fill;
-	}
+.d-video-play {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
+  object-fit: fill;
+}
 
-	.d-video-mute-btn{
-		position: absolute;
-		width: 51px;
-		height: 51px;
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
-		background-size: 50%;
-	}
-	.d-mute-btn-topLeft{
-		left: 10px;
-		top: 10px;
-	}
-	.d-mute-btn-topRight{
-		right: 10px;
-		top: 10px;
-	}
-	.d-mute-btn-bottomLeft{
-		left: 10px;
-		bottom: 10px;
-	}
-	.d-mute-btn-bottomRight{
-		right: 10px;
-		bottom: 10px;
-	}
-	.d-is-muted{
-		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMTFUMTA6MTk6MDMrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzYjJmNjE2LTZmZTUtNDJjNC1iNTgwLTczNzZjZjI2NzdmNSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYzZjQ2NTYzLWE0ZjktOGQ0Mi1hM2FhLTY3ODJhNDBhYWNjMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIyYWNjMWFlLTg4ZmMtNDBlZi1iMWM1LTNmODgwY2QzYWI2MiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjJhY2MxYWUtODhmYy00MGVmLWIxYzUtM2Y4ODBjZDNhYjYyIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjE5OjAzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDNiMmY2MTYtNmZlNS00MmM0LWI1ODAtNzM3NmNmMjY3N2Y1IiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5PmxYVAAACLklEQVRYhc2XP2sVQRRHz40hKoqaQgVBCy1EozFlGiVFxMLGh4piYWEh+hkEP4YKAVFEEFTyughaCH6DqIVpAhYWEgIxoJE8cywyi5tNHu/tJmvyg2WZO3dmzt47/zZUtoJ6Nhsg09YDiYhKDzACTAFNYH9lEpUq80TdrT5wpV5n/ZV9KoGoo+pXV2uyKkipOaLuUceAt8DhUvQd1FsCYhR4ChzaSIBMHSOi7lOfsByFWiCgEBH1GHAF2JlMPcBt4GC3HUYEaj9wF3gVEVPtfNVTwAXgWX7CDKq/1piAZTSZBmim8qJ6sQ3EgDqb/L7kU3MH2NHtl3dQX3r3Ak21UYAYAj4A/cl0JB+RF+uMRj4iQ+p8zt7KYFLdXKHuRi0gacBhV6a6pd5bA6KRNagFJPU9qv5u47toLmW1HnoR8Q5oAK1CVQu4FBHj/wUkaXsb+4pzpVaQFPqXrN7Be4Fx9VztIOr1BLEtmX4A94E/qdwHTKjDWYM6lu81dSlnn3V570BtuLxaMs2rZ/IgYxsBovaoPwsQA4VoFWEm8ql5DiysNyURsQTMpOIMcDYiPhd8xoGr/FtNC2G6FKXD6ihwGdiVHMoeeh8jYlA9ANwE3kTEp3bO6vE03qOONzR1r/q4RGrquaFFxFxE3ALOA9+6jExpdb180y55AhirhaRTatq0GXEzL8+ZIuI9cBJ4WKiartJf9nWV/mty7UfUafW7erpqRGI9EBuprffvu9n6C1KOmsqwI5A1AAAAAElFTkSuQmCC");
-	}
-	.d-not-muted{
-		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMTFUMTA6MTg6MjArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3YmE4Yjg0LTFhNTYtNGM1MS04NDVkLTNiZmYyMGI0ZDc0ZiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjg1NGQ3MjlkLWUwNjctZjU0OC1hMTlhLTBlZjQ4OGRkYjJiOSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjA1ODY3ZDFlLWQ3NGEtNDgyNC04MDU3LTYzYmRmMTdjODk5ZSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDU4NjdkMWUtZDc0YS00ODI0LTgwNTctNjNiZGYxN2M4OTllIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjE4OjIwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OTdiYThiODQtMWE1Ni00YzUxLTg0NWQtM2JmZjIwYjRkNzRmIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz459+FoAAABqElEQVRYhc2XPWsVQRSGnxPjF4oGRfxoRQKGWCU2Ft7CykrQWosEyf/If0hhIPgHDEmbNJZqCFxiQEgTUGxsBUVEHgvnyrjZZJO92V1fGIaZnTPvszPszNlQ6VIjnbr/DwCoDLMNak/dUVfUK0f2rQugnlcX/FevWgFQH6gf3autRgHUC+piiXHzAOmtPx9gXgug8itQx9SXwDpw47AGKXZWvXvQmNFCwE3gCXA2dY0Az4GrRzHONA9cU/vAbERsllEOyh31e8USV2mrMPdG9uyn+rDom2/BHHCm5puWKiKmgdtAnz+rvaxO5mNygEvHaZ5BfADuARvAaWBpP4DGFBHfgBngFzClTrUKkCDeA+9S837rAEnbqb7VFcCpVJ/oCmCw959aB1AfAROpudYqgDoOLKRmPyLelAF8bcD4pPoMeAtcB34AT4uDBqXXwFG8XXUU/72MIuK1OgE8Bs6l7mEvo8up7lN1Ge0n9aK6VHMFZvJTr9S3CiALaCQhqZOSvegMIAvu2UVSWpigLC1fbQ0gm6in7qpfLCQbhwGIYcyPQ53/G3YO8BtUtd35bvKcVwAAAABJRU5ErkJggg==");
-	}
-
-	.d-video-play-btn{
-		position: absolute;
-		width: 120px;
-		height: 120px;
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
-		background-size: 50%;
-		top: 50%;
-		left: 50%;
-		transform: translateX(-50%) translateY(-50%);
-	}
-
-	.d-is-pause{
-		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAAXNSR0IArs4c6QAAAWhJREFUSA1j+P///0cgBoHjQGzCQCsAtgJB/AMy5wCxGNXtQ9iBwvoA5BUCMQvVLEQxHpNzDSjkRhXLMM3GKrIeKKpEkYVYjcUu+AMo3ALE3GRZiN1MvKKPgbIRJFuG10j8koeA0gZEW4jfLIKyf4EqpgOxMEELCRpFnIJ3QGU5QMyM00LizCFa1SWgSkeslhFtBGkKVwGVy6FYSJp+klR/A6quB2JOkIWMIK0oNlOf8xBoZDE9LAI7nYn6HsBq4l96WHQEaLUpAyiOaASeAM2NgvuPBpaACt82IEYtfKls0UagecpwXyAzqGTRdaA57sjmYrAptAjUsCkGYlYMg9EFyLQI1IiZB8Ti6Obh5JNh0QmgHlOcBuKSIMGi50C18UDMiMssvOJEWPQLqKYbiHnxGkRIkoBF24DyaoTMIEoeh0W3geI+RBlArCI0iz4D+RVAzEasfqLVAQ19AcSg5LoYiKWI1kiiQgCMBLnEEcfDSgAAAABJRU5ErkJggg==");
-	}
-
-	.d-not-pause{
-		background-image: none;
-	}
-}
+.d-video-mute-btn {
+  position: absolute;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100%;
+  z-index: 20;
+  transform: translateZ(20px);
+  width: 24px;
+  height: 24px;
+}
+.d-mute-btn-topLeft {
+  left: 20px;
+  top: 20px;
+}
+.d-mute-btn-topRight {
+  right: 20px;
+  top: 20px;
+}
+.d-mute-btn-bottomLeft {
+  left: 20px;
+  bottom: 20px;
+}
+.d-mute-btn-bottomRight {
+  right: 20px;
+  bottom: 20px;
+}