All files / src/components/music SongDocument.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useEffect, useRef } from "react";
import styled from "styled-components";
import { SongTracker } from "components/music/tracker/SongTracker";
import { musicSelectors } from "store/features/entities/entitiesState";
import l10n from "shared/lib/lang/l10n";
import { UgePlayer } from "components/music/UgePlayer";
import { useAppSelector } from "store/hooks";
import { SongPianoRoll } from "components/music/piano/SongPianoRoll";
 
const ContentWrapper = styled.div`
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: ${(props) => props.theme.colors.background};
  color: ${(props) => props.theme.colors.text};
  position: relative;
  display: flex;
`;
 
const ContentMessage = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;
 
const ErrorTitle = styled.div`
  font-size: 14px;
  font-weight: bold;
`;
 
const ErrorDescription = styled.div`
  padding-top: 5px;
`;
 
const SongDocument = () => {
  const selectedSongId = useAppSelector(
    (state) => state.tracker.selectedSongId,
  );
 
  const song = useAppSelector((state) =>
    musicSelectors.selectById(state, selectedSongId),
  );
 
  const lastSongId = useRef("");
  useEffect(() => {
    Iif (song) {
      lastSongId.current = song.id;
    }
  }, [song]);
 
  const hasSongDocument = useAppSelector(
    (state) => !!state.trackerDocument.present.song,
  );
  const status = useAppSelector((state) => state.tracker.status);
  const error = useAppSelector((state) => state.tracker.error);
 
  const view = useAppSelector((state) => state.tracker.view);
 
  Iif (status === "error") {
    return (
      <ContentWrapper>
        <ContentMessage>
          <ErrorTitle>Can't load the song</ErrorTitle>
          <ErrorDescription>{error}</ErrorDescription>
        </ContentMessage>
      </ContentWrapper>
    );
  }
 
  Iif (status === "loading" || status === "init") {
    return (
      <ContentWrapper>
        <ContentMessage>{l10n("FIELD_LOADING")}</ContentMessage>
      </ContentWrapper>
    );
  }
 
  Iif (!hasSongDocument) {
    return (
      <ContentWrapper>
        <ContentMessage>No Song Loaded</ContentMessage>
      </ContentWrapper>
    );
  }
 
  return (
    <>
      {view === "tracker" && <SongTracker />}
      {view === "roll" && <SongPianoRoll />}
      <UgePlayer />
    </>
  );
};
 
export default SongDocument;