All files / Rindu/components/DPIPLyrics DPIPLyrics.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
19x
 
19x
19x
 
19x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19x
 
import { ReactElement, useEffect } from "react";
 
import FullScreenLyrics from "components/FullScreenLyrics";
import { useSpotify } from "hooks";
 
export const DPIPLyrics = (): ReactElement => {
  const { pipWindow } = useSpotify();
  useEffect(() => {
    Iif (!pipWindow.current) return;
    const { document: pipDoc } = pipWindow.current;
 
    pipDoc.documentElement.style.cssText = "";
    pipDoc.body.style.cssText = "";
 
    pipDoc.body.style.margin = "0";
    pipDoc.body.style.padding = "0";
    pipDoc.body.style.minHeight = "100vh";
    pipDoc.body.style.display = "flex";
 
    const style = document.createElement("style");
    style.textContent = `
      .beta-label {
        font-size: 14px;
        font-weight: bold;
        padding: 4px 8px;
        border-radius: 4px;
        text-transform: uppercase;
        display: inline-block;
        color: #fff;
        border: 1px solid #fff;
        display: flex;
        justify-self: center;
        width: fit-content;
      }
    `;
    pipDoc.head.appendChild(style);
 
    return () => {
      pipDoc.documentElement.style.cssText = "";
      pipDoc.body.style.cssText = "";
      pipDoc.head.removeChild(style);
    };
  }, [pipWindow]);
 
  return (
    <div className="pipApp" style={{ width: "100%" }}>
      <p className="beta-label">Beta</p>
      <FullScreenLyrics document={pipWindow.current?.document} />
    </div>
  );
};
 
export default DPIPLyrics;