csstype#Property TypeScript Examples

function avatarCommon(props: ImageAvatarProps){
  const style = {
    width: props.size,
    height: props.size,
    color:props.colors[1],
    backgroundColor:props.colors[0],
    pointerEvents: 'none' as Property.PointerEvents,
    userDrag: 'none',
    fontSize: props.size * 0.3,
    display:'inline-block',
  }

  return style
}

useStyles = makeStyles({
  imageAvatar: (props: ImageAvatarProps) => {
    const style = avatarCommon(props)
    Object.assign(style, {textAlign:'right' as Property.TextAlign,
      verticalAlign: 'top' as Property.VerticalAlign})
    if (props.border){ addBoarder(style, props) }

    return style
  },
  textAvatar: (props: ImageAvatarProps) => {
    const style = avatarCommon(props)
    if (props.border){ addBoarder(style, props) }

    return style
  }
})

/**
 * Процессор, который формирует из описания темы (ThemeDescription)
 * цвета со всеми состояниями active, hover и normal
 *
 * (и добавляет эти состояния только тем цветам, которые там действительно нужны)
 */
export function getExpandedThemeColors<
	T extends {[key in keyof T]: ColorDescription} = ColorsDescriptionStruct
>(colorsDescription: Partial<ColorsDescription<T>>): ColorsFinal {
	const {colorsScheme, colors} = colorsDescription;

	if (!colorsScheme || !colors) {
		return null;
	}

	const theme: Partial<ColorsFinal> = {
		colorsScheme,
	};

	Object.entries(colors).forEach(
		([key, colorValue]: [keyof ColorsDescription, Property.Color]) => {
			theme[key] = expandColor(colorValue, colorsDescription);
		},
	);

	return theme as ColorsFinal;
}

getColorWithStates = ({
	colorArg,
	colorState,
	toneValueActive,
	toneValueHover,
}: {
	colorArg: Property.Color;
	colorState: Property.Color;
	toneValueActive: number;
	toneValueHover: number;
}): ColorWithStates => ({
	normal: colorArg,
	hover: mixColors(colorArg, colorState, toneValueHover),
	active: mixColors(colorArg, colorState, toneValueActive),
})

describe('mixColors', () => {
	const colorState: Property.Color = '#000000';

	it('should work with transparent', () => {
		const result = mixColors('transparent', colorState, 1);
		expect(result).toBe('rgb(0, 0, 0)');
	});

	it('should work with transparent and opacity', () => {
		const result = mixColors('transparent', colorState, 0.5);
		expect(result).toBe('rgba(0, 0, 0, 0.5)');
	});

	it('should work with hex color', () => {
		const result = mixColors('#F00', colorState, 0.5);
		expect(result).toBe('#800000');
	});

	it('should work with rgb color', () => {
		const result = mixColors('rgb(255, 0 , 0)', colorState, 0.5);
		expect(result).toBe('#800000');
	});

	it('should work with rgba color (mixing opacity)', () => {
		const result = mixColors('rgba(255, 0, 0, 0.5)', colorState, 0.1);
		expect(result).toBe('rgba(255, 0, 0, 0.6)');
	});
});

mixColors = (
	colorArg: Property.Color,
	colorState: Property.Color,
	opacity: number,
): Property.Color => {
	if (colorArg === 'transparent') {
		return color(colorState)
			.alpha(0.01 * Math.round(Math.min(1, opacity) * 100))
			.rgb()
			.string();
	}

	const colorObj = color(colorArg);
	const alpha = colorObj.alpha();
	if (alpha !== 1) {
		return colorObj
			.alpha(0.01 * Math.round(Math.min(1, alpha + opacity) * 100))
			.rgb()
			.string();
	}

	return colorObj.mix(color(colorState), opacity).hex();
}

fontFamily: Property.FontFamily =
	'MailSans, Helvetica, Arial, sans-serif'

fontFamily: Property.FontFamily =
	'MailSans, Helvetica, Arial, sans-serif'

fontFamilyBase: Property.FontFamily =
	'Inter, Helvetica, Arial, sans-serif'

export function justifyContent(value: Property.JustifyContent): CSSObject {
  return {
    justifyContent: value,
  }
}

ParticipantView = ({
  participant,
  width,
  height,
  className,
  speakerClassName,
  aspectWidth,
  aspectHeight,
  orientation,
  displayName,
  showOverlay,
  showConnectionQuality,
  onMouseEnter,
  onMouseLeave,
  onClick,
}: ParticipantProps) => {
  const { cameraPublication, isLocal, connectionQuality, isSpeaking } = useParticipant(participant);
  const [videoSize, setVideoSize] = useState<string>();
  const [currentBitrate, setCurrentBitrate] = useState<number>();
  const context = useContext(DisplayContext);

  const handleResize = useCallback((width: number, height: number) => {
    setVideoSize(`${width}x${height}`);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      let total = 0;
      participant.tracks.forEach((pub) => {
        if (pub.track instanceof LocalTrack || pub.track instanceof RemoteTrack) {
          total += pub.track.currentBitrate;
        }
      });
      setCurrentBitrate(total);
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);

  const containerStyles: CSSProperties = {
    width: width,
    height: height,
  };

  // when aspect matches, cover instead
  let objectFit: Property.ObjectFit = 'contain';
  let videoOrientation: 'landscape' | 'portrait' | undefined;
  if (!orientation && aspectWidth && aspectHeight) {
    orientation = aspectWidth > aspectHeight ? 'landscape' : 'portrait';
  }
  if (cameraPublication?.dimensions) {
    videoOrientation =
      cameraPublication.dimensions.width > cameraPublication.dimensions.height
        ? 'landscape'
        : 'portrait';
  }

  if (videoOrientation === orientation) {
    objectFit = 'cover';
  }

  if (!displayName) {
    displayName = participant.name || participant.identity;
    if (isLocal) {
      displayName += ' (You)';
    }
  }

  let mainElement: ReactElement;
  if (cameraPublication?.isSubscribed && cameraPublication?.track && !cameraPublication?.isMuted) {
    mainElement = (
      <VideoRenderer
        track={cameraPublication.track}
        isLocal={isLocal}
        objectFit={objectFit}
        width="100%"
        height="100%"
        className={styles.video}
        onSizeChanged={handleResize}
      />
    );
  } else {
    mainElement = <div className={styles.placeholder} />;
  }

  const classes = [styles.participant];
  if (className) {
    classes.push(className);
  }
  if (isSpeaking) {
    classes.push(speakerClassName ?? styles.speaker);
  }
  const isAudioMuted = !participant.isMicrophoneEnabled;

  // gather stats
  let statsContent: ReactElement | undefined;
  if (context.showStats) {
    statsContent = (
      <div className={styles.stats}>
        <span>{videoSize}</span>
        {currentBitrate !== undefined && currentBitrate > 0 && (
          <span>&nbsp;{Math.round(currentBitrate / 1024)} kbps</span>
        )}
      </div>
    );
  }

  let ConnectionQualityIndicator: typeof connectionQuality1 | undefined;
  if (showConnectionQuality) {
    switch (connectionQuality) {
      case ConnectionQuality.Excellent:
        ConnectionQualityIndicator = connectionQuality3;
        break;
      case ConnectionQuality.Good:
        ConnectionQualityIndicator = connectionQuality2;
        break;
      case ConnectionQuality.Poor:
        ConnectionQualityIndicator = connectionQuality1;
        break;
    }
  }

  return (
    <div
      className={classes.join(' ')}
      style={containerStyles}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onClick={onClick}
    >
      {aspectWidth && aspectHeight && (
        <AspectRatio ratio={aspectWidth / aspectHeight}>{mainElement}</AspectRatio>
      )}
      {(!aspectWidth || !aspectHeight) && mainElement}

      {(showOverlay || context.showStats) && (
        <div className={styles.participantBar}>
          <div className={styles.name}>{displayName}</div>
          <div className={styles.center}>{statsContent}</div>
          <div>{ConnectionQualityIndicator && <ConnectionQualityIndicator />}</div>
          <div>
            <FontAwesomeIcon
              icon={isAudioMuted ? faMicrophoneSlash : faMicrophone}
              height={24}
              className={isAudioMuted ? styles.iconRed : styles.iconNormal}
            />
          </div>
        </div>
      )}
    </div>
  );
}