fix(#2572): fix audio player and some layout

3 years ago · ea4879f761
parent ce3940b957
commit ea4879f761
14 changed files with 81 additions and 16 deletions
--- a/src/components/AudioPlayer/hooks.tsx
+++ b/src/components/AudioPlayer/hooks.tsx
@ -6,7 +6,7 @@ import {
 import { readToken } from 'helpers'

 export const useAudioPlayer = (asset: string) => {
-  const [audio, setAudio] = useState<HTMLAudioElement>()
+  const [audio, setAudio] = useState<HTMLAudioElement | null>(null)
  const [playing, setPlaying] = useState(false)

  const toggle = (e: SyntheticEvent) => {
@ -16,15 +16,16 @@ export const useAudioPlayer = (asset: string) => {
  }

  useEffect(() => {
+    setPlaying(false)
+    audio?.pause()
    asset && setAudio(new Audio(`${asset}?access_token=${readToken()}`))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [asset])

  useEffect(() => {
-    if (!audio) return
    playing ? audio?.play() : audio?.pause()
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playing, audio])
+  }, [playing])

  useEffect(() => {
    audio?.addEventListener('ended', () => setPlaying(false))
--- a/src/features/AddCardForm/components/ElementContainer/index.tsx
+++ b/src/features/AddCardForm/components/ElementContainer/index.tsx
@ -32,13 +32,19 @@ const Label = styled.label<LabelProps>`

  ${isMobileDevice
    ? css`
-     height: 36px;
+     height: 27px;
     font-size: 12px;
     padding: 0 13px;
     align-items: center;
+
+     
     :nth-child(3){
      width: 48%;
     }
+     
+     /* & .test_class {
+      width: 48%;
+     } */
     :nth-child(4){
      width: 48%;
     }
@ -74,6 +80,7 @@ const ElementWrapper = styled.div`
 type Props = {
  backgroundColor?: string,
  children: ReactNode,
+  className?: string,
  label?: string,
  width?: string,
 }
@ -81,10 +88,11 @@ type Props = {
 export const ElementContainer = ({
  backgroundColor,
  children,
+  className,
  label,
  width,
 }: Props) => (
-  <Label width={width} backgroundColor={backgroundColor}>
+  <Label width={width} backgroundColor={backgroundColor} className={className}>
    {label && <Text t={label} />}
    <ElementWrapper>
      {children}
--- a/src/features/AddCardForm/components/Form/index.tsx
+++ b/src/features/AddCardForm/components/Form/index.tsx
@ -120,6 +120,7 @@ export const AddCardFormInner = (props: Props) => {
        <ElementContainer
          label={isLabelVisible(ElementTypes.CardExpiry) ? 'form_card_expiration' : ''}
          width='275px'
+          className='test_class'
          backgroundColor={inputsBackground}
        >
          <CardExpiryElement
@ -161,7 +162,7 @@ export const AddCardFormInner = (props: Props) => {
        </CountryWrapper>
        <ElementContainer
          label={isLabelVisible(ElementTypes.CardCity) ? 'city' : ''}
-          width='275px'
+          width={isMobileDevice ? '100%' : '275px'}
          backgroundColor={inputsBackground}
        >
          <Input
@ -175,6 +176,7 @@ export const AddCardFormInner = (props: Props) => {
        </ElementContainer>
        <ElementContainer
          label={isLabelVisible(ElementTypes.CardAddress) ? 'address' : ''}
+          width='100%'
          backgroundColor={inputsBackground}
        >
          <Input
@ -184,6 +186,7 @@ export const AddCardFormInner = (props: Props) => {
            onChange={onAddressChange}
            onFocus={onInputsFocus(ElementTypes.CardAddress)}
            onBlur={onInputsBlur(ElementTypes.CardAddress)}
+            className='ChangeCard__Form__Address'
          />
        </ElementContainer>
      </Column>
--- a/src/features/AddCardForm/styled.tsx
+++ b/src/features/AddCardForm/styled.tsx
@ -90,7 +90,6 @@ export const SectionTitle = styled.span`
      }
    `
    : ''};
-
 `

 export const CountryWrapper = styled.div`
@ -101,10 +100,22 @@ export const CustomCombobox = styled(Combobox)`
  ${InputWrapper}{
    height: 50px;
    margin-top: 0;
+
+  ${isMobileDevice
+    ? css`
+      height: 27px;
+    `
+    : ''};
  }
  ${LabelTitle}{
    line-height:45px;
    font-size: 16px;
+
+    ${isMobileDevice
+    ? css`
+      font-size: 12px;
+    `
+    : ''};
  }
  ${InputStyled}{
    height: 50px;
--- a/src/features/BuyMatchPopup/components/CardsList/index.tsx
+++ b/src/features/BuyMatchPopup/components/CardsList/index.tsx
@ -31,7 +31,7 @@ const Item = styled.li`
    ? css`
      width: 100%;
      height: 21px;
-      margin-bottom: 14px;
+      /* margin-bottom: 14px; */
    `
    : ''}
 `
@ -53,7 +53,7 @@ const Radio = styled(RadioBase)`
    margin-right: 12px;
    ${isMobileDevice
    ? css`
-      margin-right: 18px;
+      /* margin-right: 18px; */
      width: 16px;
      height: 16px;
    `
--- a/src/features/BuyMatchPopup/styled.tsx
+++ b/src/features/BuyMatchPopup/styled.tsx
@ -103,7 +103,7 @@ export const Wrapper = styled.div<WrapperProps>`

      @media (max-width: 1370px) {
       max-width: 743px;
-       max-height: 650px;
+       /* max-height: 650px; */

      }
      @media (max-width: 650px){
--- a/src/features/Combobox/index.tsx
+++ b/src/features/Combobox/index.tsx
@ -117,7 +117,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
          <WrapperIcon>
            <Icon refIcon={iconName} />
          </WrapperIcon>
-        ) : (
+        ) : !disabled && (
          <Arrow isExpanded={isOpen} toggle={toggle} />
        )}
        {isOpen && !isEmpty(options) && (
--- a/src/features/ProfileCard/styled.tsx
+++ b/src/features/ProfileCard/styled.tsx
@ -104,7 +104,7 @@ ${isMobileDevice
    ? css`
      @media (max-width: 650px),(orientation: landscape){
        width: 100px;
-        height: 22px;
+        min-height: 17px;
        font-size: 10px;
        border-radius: 7px;
        border: 0.7px solid #fff;
@ -172,6 +172,12 @@ export const StyledLink = styled(ProfileLink)`
 export const SсBtnWrapper = styled.div`
  display: flex;
  flex-direction: row;
+
+  ${isMobileDevice
+    ? css`
+      flex-direction: column;
+    `
+    : ''};
 `

 export const SсGetHighlightBtn = styled(ButtonSolid)`
@ -186,4 +192,17 @@ export const SсGetHighlightBtn = styled(ButtonSolid)`
  height: 1.95rem;
  border-radius: 13px;
  margin-left: 5px;
+
+  ${isMobileDevice
+    ? css`
+      width: 100%;
+      min-height: 17px;
+      font-size: 10px;
+      border-radius: 7px;
+      margin: 0;
+      border: 0.7px solid #fff;
+      font-size: 10px;
+      line-height: 24px;
+    `
+    : ''};
 `
--- a/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
+++ b/src/pages/HighlightsPage/components/FormHighlights/hooks.tsx
@ -329,6 +329,10 @@ export const useHighlightsForm = () => {
          ...player,
          name: `${player?.firstname_eng} ${player?.lastname_eng}`,
        })))
+        setPlayers(state?.map((player: Player) => ({
+          ...player,
+          name: `${player?.firstname_eng} ${player?.lastname_eng}`,
+        })))
      })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formState?.selectedTeam, playerHighlight])
--- a/src/pages/HighlightsPage/components/FormHighlights/index.tsx
+++ b/src/pages/HighlightsPage/components/FormHighlights/index.tsx
@ -141,7 +141,8 @@ export const FormHighlights = ({ price }: PriceInfoType) => {
            withError={false}
            wrapperHeight={wrapperHeight}
            labelBefore={selectedSound?.asset}
-            className='FormHighlights__input__sound'
+            className={selectedSound?.asset
+              ? 'FormHighlights__input__sound' : ''}
          />
          <Combobox
            disabled
--- a/src/pages/HighlightsPage/components/FormHighlights/styled.tsx
+++ b/src/pages/HighlightsPage/components/FormHighlights/styled.tsx
@ -95,6 +95,18 @@ export const ScForm = styled.form`
      }
    }

+    .FormHighlights__input__sound {
+      & input {
+        margin-left: 33px;
+
+      ${isMobileDevice
+    ? css`
+        margin-left: 20px;
+      `
+    : ''};
+      }
+    }
+
    ${isMobileDevice
    ? css`
        max-width: 100%;
--- a/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx
+++ b/src/pages/HighlightsPage/components/MatchesHighlights/styled.tsx
@ -152,6 +152,12 @@ export const ScLoaderWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
+
+  ${isMobileDevice
+    ? css`
+      left: 15%;
+    `
+    : ''};
 `

 export const ScCountMatches = styled.span`
--- a/src/pages/HighlightsPage/components/PriceInfo/styled.tsx
+++ b/src/pages/HighlightsPage/components/PriceInfo/styled.tsx
@ -3,7 +3,6 @@ import styled, { css } from 'styled-components/macro'

 export const ScPriceInfo = styled.div`
  height: 186px;
-  min-width: 150px;
  border: 1px solid #FFFFFF;
  border-radius: 34px;
  display: flex;
@ -11,7 +10,7 @@ export const ScPriceInfo = styled.div`
  justify-content: center;
  align-content: center;
  color: #FFFFFF;
-  padding: 21px;
+  padding: 21px 21px 21px 40px;

  font-weight: 600;
  font-size: 20px;
--- a/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx
+++ b/src/pages/HighlightsPage/components/ThanksPopup/styled.tsx
@ -18,7 +18,7 @@ export const ScModal = styled(BaseModal)`
    flex-direction: column;
    padding: 50px;
    width: 497px;
-    height: 430px;
+    height: 470px;

    > * {
      margin-bottom: 25px;
@ -61,6 +61,7 @@ export const ScText = styled.span`
 export const ScButton = styled(ButtonSolid)`
  width: 194px;
  height: 50px;
+  min-height: 50px;
  font-weight: 600;
  font-size: 20px;
  line-height: 50px;