feat(23UG-74): добавляет Player (ипользовано Page Visibility API)

[EAbashin]

Какую задачу решаем

Добавляет Player на страницу с игрой.

Использован Page Visibility API для постановки фоновой музыки на паузу при не активной вкладке.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
uno-game-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2023 4:41pm

[cap-Bernardito]

А это для чего? Не нашел, где foo используется.
Ну и название переменной, конечно, огонь ))

[EAbashin]

Нигде больше не используется)) Нужно как-то отображение кнопки Музыка поменять при её нажатии, делаю это через useState. А название переменной показывает, что оно не имеет значение (foo, bar - общепринятые). Думаешь лучше переименовать? Или комментарий оставить?

[cap-Bernardito]

Честно говоря, мне в целом не нравится, как компонент написан. Как будто ненужные флаги, шаманское foo, ну и опять же, смешались вместе кони, люди,...

Я бы вынес проверку видимости в отдельный хук, т.к. это может понадобиться и в других местах. Пускай не в нашем проекте, но надо же в общем думать и делать удобно для людей. Сейчас это не переиспользуемый сложночитаемый монолит. Я так считаю ))

В общем, я бы написал как-то так:

const usePageVisibility = (initialState = true) => {
  const [pageIsVisible, setPageIsVisible] = useState(initialState);

  useEffect(() => {
    const handleVisibilitychange = () => {
      if (document.hidden) {
        setPageIsVisible(false);
      } else {
        setPageIsVisible(true);
      }
    };

    document.addEventListener("visibilitychange", handleVisibilitychange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilitychange);
    };
  }, []);

  return pageIsVisible;
};

const Player: React.FC<PlayerType> = ({ url }) => {
  const pageIsVisible = usePageVisibility();
  const refAudio = useRef<HTMLAudioElement | null>(null);
  const [isAudioOn, setIsAudioOn] = useState(false);

  const toggle = () => {
    setIsAudioOn(!isAudioOn);
  };

  useLayoutEffect(() => {
    refAudio.current = new Audio(url);

    return () => {
      refAudio.current?.pause();
      refAudio.current = null;
    };
  }, []);

  useEffect(() => {
    if (!pageIsVisible) {
      refAudio.current?.pause();

      return;
    }

    if (isAudioOn) {
      refAudio.current?.play();

      return;
    }

    refAudio.current?.pause();
  }, [pageIsVisible, isAudioOn]);

  return (
    <Button
      variant="contained"
      sx={{ position: "absolute", top: "10px", left: "85px", zIndex: "1" }}
      onClick={toggle}
    >
      {isAudioOn ? <VolumeUpIcon /> : <VolumeOffIcon />}
    </Button>
  );
};

Но, раз всем OK, то, вероятно, здесь вопрос дискуссионный, так, что я не настаиваю.

[cap-Bernardito]

А чем эти 2 строчки в плане типов отличаются, почему они по-разному написаны?
Вообще говоря, тут тип автоматически выводится (как во второй строчке), но если уж хочется указать, почему не boolean? <true | false> - это какая-то конвенция? ))

[cap-Bernardito]

Честно говоря, мне в целом не нравится, как компонент написан. Как будто ненужные флаги, шаманское foo, ну и опять же, смешались вместе кони, люди,...

Я бы вынес проверку видимости в отдельный хук, т.к. это может понадобиться и в других местах. Пускай не в нашем проекте, но надо же в общем думать и делать удобно для людей. Сейчас это не переиспользуемый сложночитаемый монолит. Я так считаю ))

В общем, я бы написал как-то так:

const usePageVisibility = (initialState = true) => {
  const [pageIsVisible, setPageIsVisible] = useState(initialState);

  useEffect(() => {
    const handleVisibilitychange = () => {
      if (document.hidden) {
        setPageIsVisible(false);
      } else {
        setPageIsVisible(true);
      }
    };

    document.addEventListener("visibilitychange", handleVisibilitychange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilitychange);
    };
  }, []);

  return pageIsVisible;
};

const Player: React.FC<PlayerType> = ({ url }) => {
  const pageIsVisible = usePageVisibility();
  const refAudio = useRef<HTMLAudioElement | null>(null);
  const [isAudioOn, setIsAudioOn] = useState(false);

  const toggle = () => {
    setIsAudioOn(!isAudioOn);
  };

  useLayoutEffect(() => {
    refAudio.current = new Audio(url);

    return () => {
      refAudio.current?.pause();
      refAudio.current = null;
    };
  }, []);

  useEffect(() => {
    if (!pageIsVisible) {
      refAudio.current?.pause();

      return;
    }

    if (isAudioOn) {
      refAudio.current?.play();

      return;
    }

    refAudio.current?.pause();
  }, [pageIsVisible, isAudioOn]);

  return (
    <Button
      variant="contained"
      sx={{ position: "absolute", top: "10px", left: "85px", zIndex: "1" }}
      onClick={toggle}
    >
      {isAudioOn ? <VolumeUpIcon /> : <VolumeOffIcon />}
    </Button>
  );
};

Но, раз всем OK, то, вероятно, здесь вопрос дискуссионный, так, что я не настаиваю.

[cap-Bernardito]

Это хук. Нужно создать папку hooks и поместить его туда.

• в vite.config.ts добавить alias для этой папки.

[cap-Bernardito]

Название классов вроде с большой буквы обычно пишут.

[Olegas]

• видимо пока не используется, потому что методы start/stop не рабочие (

[Olegas]

В целом все ок, но вот бы убрать неиспользуемый/не дописанный класс timer или доделать его