All files / src/components/music NoSongsMessage.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useCallback, useState } from "react";
import l10n from "shared/lib/lang/l10n";
 
import settingsActions from "store/features/settings/settingsActions";
import { SettingsState } from "store/features/settings/settingsState";
import { useAppDispatch } from "store/hooks";
import { Button } from "ui/buttons/Button";
 
interface NoSongsMessageProps {
  type: "uge" | "mod";
}
export const NoSongsMessage = ({ type }: NoSongsMessageProps) => {
  const dispatch = useAppDispatch();
  const [showMessage, setShowMessage] = useState(false);
 
  const editSettings = useCallback(
    (patch: Partial<SettingsState>) => {
      dispatch(settingsActions.editSettings(patch));
    },
    [dispatch]
  );
 
  return (
    <>
      <h2>{l10n("MESSAGE_NO_SONGS_FOUND")}</h2>
      {type === "uge" ? (
        <>
          <p>{l10n("MESSAGE_ADD_UGE_FILES")}</p>
          <p
            onClick={() => setShowMessage(!showMessage)}
            style={{ textDecoration: "underline", cursor: "pointer" }}
          >
            {l10n("MESSAGE_WHAT_ABOUT_MOD")}
          </p>
          {showMessage ? (
            <>
              <p>{l10n("MESSAGE_USE_MOD_FILES")}</p>
              <Button onClick={() => editSettings({ musicDriver: "gbt" })}>
                {l10n("MESSAGE_ENABLE_GBT")}
              </Button>
            </>
          ) : (
            ""
          )}
        </>
      ) : (
        <>
          <p>{l10n("MESSAGE_ADD_MOD_FILES")}</p>
          <p
            onClick={() => setShowMessage(!showMessage)}
            style={{ textDecoration: "underline", cursor: "pointer" }}
          >
            {l10n("MESSAGE_WHAT_ABOUT_UGE")}
          </p>
          {showMessage ? (
            <>
              <p>{l10n("MESSAGE_USE_UGE_FILES")}</p>
              <Button onClick={() => editSettings({ musicDriver: "huge" })}>
                {l10n("MESSAGE_ENABLE_HUGE")}
              </Button>
            </>
          ) : (
            ""
          )}
        </>
      )}
    </>
  );
};