Make password not visible easily & fix en issue where error messages is displayed in the middle of the video

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:16-alpine as builder
+WORKDIR /app
+COPY . /app/
+RUN npm install
+RUN npm run build
+
+FROM php:8.2-apache
+COPY --from=builder /app/build /var/www/html/
+WORKDIR /var/www/html/

src/components/AccountInfo.js

@@ -130,7 +130,7 @@ const AccountInfo = () => {
 	        	<div className="nav__content">
 	        		<ul tabIndex={0} className="nav__list" style={{padding: "0 20%"}}>
 						<Li tabIndex={-1} className="nav__list-item">Username: <button className="hover-target">{info.username}</button></Li>
-	        			<Li tabIndex={-1} className="nav__list-item">Password: <button className="hover-target">{info.password}</button></Li>
+	        			<Li tabIndex={-1} className="nav__list-item">Password: <button className="hover-target"></button>******</Li>
 	        			<Li tabIndex={-1} className="nav__list-item">Max connections: <button className="hover-target">{info.max_connections}</button></Li>
 	        			<Li tabIndex={-1} className="nav__list-item">Expire on: <button className="hover-target">{info.expiry.toGMTString()}</button></Li>
 	        			<Li tabIndex={-1} className="nav__list-item">{info.message}</Li>

src/components/Login.js

@@ -136,7 +136,7 @@ const Login = ({url}) => {
                 <label>Username</label>
                 <Input ref={window.dns ? inputRef : null} className="form-control" type="text" spellCheck={false} placeholder="Username" name="username" autoFocus onChange={(e)=> setUsername(e.target.value)} value={username} />
                 <label>Password</label>
-                <Input className="form-control" type="password" spellCheck={false} placeholder="****" name="password" onChange={(e)=> setPassword(e.target.value)} value={password}/>
+                <Input type="password" className="form-control" type="password" spellCheck={false} placeholder="****" name="password" onChange={(e)=> setPassword(e.target.value)} value={password}/>
                 <Button type="button" value="1" onClick={login} className="btn">Login</Button>
             </Box>
         </Container>

src/components/Player/Buttons/VLCButton.js

@@ -0,0 +1,84 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const ButtonObj = styled.button`
+cursor: pointer;
+position: relative;
+text-align: center;
+margin: 0;
+padding: 0;
+height: 100%;
+width: 4em;
+-webkit-flex: none;
+flex: none;
+background: none;
+border: none;
+color: inherit;
+display: inline-block;
+font-size: inherit;
+line-height: inherit;
+text-transform: none;
+text-decoration: none;
+transition: none;
+-webkit-appearance: none;
+appearance: none;
+transition: text-shadow .2s ease;
+
+&:focus{
+    outline: 0!important;
+}
+
+&:hover{
+    text-shadow: 0em 0em 1em white;
+}
+
+`
+
+const PopupText = styled.span`
+border: 0;
+clip: rect(0 0 0 0);
+height: 1px;
+overflow: hidden;
+padding: 0;
+position: absolute;
+width: 1px;
+`
+
+const openInVlc = (url, title) => {
+    if (!url) return;
+
+    // Try the VLC custom protocol first (works when VLC has registered the vlc:// handler).
+    try {
+        window.location.href = "vlc://" + url;
+    } catch (e) { /* ignore */ }
+
+    // Fallback: download an .m3u playlist that opens in the user's default media player (VLC).
+    const content = "#EXTM3U\n#EXTINF:-1," + (title || "Stream") + "\n" + url + "\n";
+    const blob = new Blob([content], { type: "audio/x-mpegurl" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = (title ? title.replace(/[^a-z0-9]/gi, "_") : "stream") + ".m3u";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => URL.revokeObjectURL(link.href), 1000);
+}
+
+const VLCButton = ({ url, title }) => {
+    return (
+        <ButtonObj type="button" title="Open in VLC" onClick={() => openInVlc(url, title)}>
+          <i>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 48 48" fill="currentColor">
+              <path d="M30.6 30.2H17.4l-1.9 5.1c-.2.5.2 1 .8 1h15.4c.6 0 1-.5.8-1l-1.9-5.1z"/>
+              <path d="M27.9 23.1h-7.8l-1.6 4.3h11l-1.6-4.3z"/>
+              <path d="M26.2 6.7c-.1-.4-.5-.7-.9-.7h-2.6c-.4 0-.8.3-.9.7l-1.1 3h6.6l-1.1-3z"/>
+              <path d="M21 12.5l-1.6 4.3h9.2L27 12.5h-6z"/>
+              <path d="M33.9 38.7H14.1c-.6 0-1 .5-.8 1l.4 1.6c.1.4.5.7.9.7h18.8c.4 0 .8-.3.9-.7l.4-1.6c.2-.5-.2-1-.8-1z"/>
+            </svg>
+          </i>
+        	<PopupText aria-live="Open in VLC">Open in VLC</PopupText>
+        </ButtonObj>
+    )
+}
+
+export default VLCButton

src/components/Player/Player.js

@@ -5,6 +5,7 @@ import Fullscreen from "../Live/Fullscreen.js"
 import Button from "./Buttons/Button"
 import VolumeButton from "./Buttons/VolumeButton"
 import PiPButton from "./Buttons/PiPButton"
+import VLCButton from "./Buttons/VLCButton"
 import {generateUrl, catchupUrlGenerator, convertTsToM3u8} from "../../other/generate-url"
 import {Loading} from '../../other/Player-github/style';
 
@@ -55,6 +56,7 @@ align-items:center;
 `
 
 let timeout = null;
+let timeoutError = null;
 const Player = () => {
   const ref = useRef();
 
@@ -71,6 +73,14 @@ const Player = () => {
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState(false)
 
+  const setErrorWithTimeout = () => {
+    setError(true);
+    clearTimeout(timeoutError);
+    timeoutError = setTimeout(()=>{
+      setError(false);
+    },2000);
+  }
+
   useEffect(() => {
     if (ref.current) {
       const elem = ref.current;
@@ -155,9 +165,9 @@ const Player = () => {
          url={url}
          pip={pip}
          controls={false}
-         onError={()=> setError(true)}
-         onBufferEnd={()=>setIsLoading(false)}
-         onBuffer={()=>setIsLoading(true)}
+         onError={()=>  setErrorWithTimeout()}
+         onBufferEnd={()=> setIsLoading(false)}
+         onBuffer={()=> setIsLoading(true)}
         />
         { isLoading === true && (<Spin>
             <Loading color={"var(--second-color);"}>
@@ -177,6 +187,7 @@ const Player = () => {
         <ContainerButtons dir="ltr" style={hoverStyle}>
         	<Button enabled={play} onClick={() => setPlay(!play)} iconOn={"fas fa-play"} iconOff={"fas fa-pause"} textOn={"Play"} textOff={"Pause"}/>
           <VolumeButton enabled={volume===0} onClick={() => setVolume(0)} onChangeInput={(e) => setVolume(e.target.value)} volume={volume}/>
+          <VLCButton url={url} title={playingChannel.title}/>
           <PiPButton enabled={pip} onClick={() => setPip(!pip)}/>
           <Button enabled={fullscreen} onClick={() => setFullscreen(!fullscreen)} iconOn={"fas fa-expand"} iconOff={"fas fa-compress"} textOn={"Fullscreen"} textOff={"Exit fullscreen"}/>
         </ContainerButtons>