<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rajat Video Player</title>
  <link rel="stylesheet" href="styles/main.css" />
</head>

<body>
  <div class="heading">
    <h1>R<span>A</span>J<span>A</span>T <span>PLAYER</span></h1>
  </div>
  <h3 id="title"></h3>
  <div id="player" data-player="false">
    <input id="videoInput" type="file" class="hidden" accept=".mp4,.mkv,.webm" />
    <div class="upload flex">
      <label id="uploadLabel" for="videoInput"><img src="assets/icons/plus-animated-icon.gif" id="uploadAdd""
          /></label
        >
        <h2>Click to Select Video File</h2>
      </div>
      
      <p id="msg"></p>
    </div>

    <div class="yt">
      <div class="ytWatchbtn" data-open="false">YouTube Mode</div>
      <input type="search" placeholder="Enter a YouTube Video or Shorts Link" id="ytsearch" />
      <iframe src="" title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
    
    <div class="yt_black_logo">
      <img id="yt_logo_img" src="assets/icons/youtube_dark_logo1.png">
    </div>

    <div class="yt_instruction">
      <p>Enter a YouTube Link & Press ENTER</p>
      <p>Some Videos might not be played due to YouTube Policy Restrictions</p>
    </div>

    <div id="videoEnd" class="flex flex-jc-c flex-ai-c">
      <p>Playback Ended</p>
      <p id="playAgain">Play Again</p>
    </div>

    <div id="videoSettings" class="flex flex-jc-c flex-ai-c" data-videosettings="false">
      <div id="colorBox">
        <h3>Color Settings</h3>
        <div class="colorOptions flex">

          <div id="part_one" class="flex">
            <div class="flex flex-jc-sb flex-jc-c flex-ai-c" id="brigtness_box">
              <label>Brightness</label>
              <div>
                <input type="range" min="0" max="250" class="color" data-filter="brightness" data-color="0" />
                <p class="color_values">100%</p>
                <br />
              </div>
            </div>
            <div class="flex flex-jc-sb">
              <label>Contrast</label>
              <div>
                <input type="range" min="0" max="250" class="color" data-filter="contrast" data-color="1" />
                <p class="color_values">100%</p>
                <br />
              </div>
            </div>
            <div class="flex flex-jc-sb">
              <label>Saturation</label>
              <div>
                <input type="range" min="0" max="250" class="color" data-filter="saturate" data-color="2" />
                <p class="color_values">100%</p>
                <br />
              </div>
            </div>
          </div>

          <div id="part_two" class="flex">
            <div class="flex flex-jc-sb" id="sepia_box">
              <label>Sepia</label>
              <div>
                <input type="range" min="0" max="100" value="0" class="color" data-filter="sepia" data-color="3" />
                <p class="color_values">0%</p>
                <br />
              </div>
            </div>
            <div class="flex flex-jc-sb">
              <label>Invert</label>
              <div>
                <input type="range" min="0" max="100" value="0" class="color" data-filter="invert" data-color="4" />
                <p class="color_values">0%</p>
                <br />
              </div>
            </div>
            <div class="flex flex-jc-sb">
              <label>Filters</label>
              <div>
                <input type="range" min="0" max="300" value="0" class="color" data-filter="hue-rotate" data-color="5" />
                <p class="color_values">0%</p>
                <br />
              </div>
            </div>
          </div>

        </div>
      </div>

      <div>
        <div id="below_box" class="flex flex-ai-c flex-jc-c">

          <div id="part_three">
            <h3>Flip Settings</h3>
            <div class="flex flex-ai-c" id="flip_box">
              <label for="flip-H" class="label_flip">Horizontal Flip</label>
              <input type="checkbox" id="flip-H" class="flip" />
              <label for="flip-V" class="label_flip">Vertical Flip</label>
              <input type="checkbox" id="flip-V" class="flip" />
            </div>

            <div class="flex flex-jc-sb" id="rotate_box">
              <h3>Rotate Settings</h3>
              <div id="rotate-slider">
                <input type="range" min="-180" max="180" value="0" step="45" list="rotateOptions" class="rotate"
                  data-filter="rotate" />
                <datalist id="rotateOptions">
                  <option value="-180" label="-180"></option>
                  <option value="-135" label="-135"></option>
                  <option value="-90" label="-90"></option>
                  <option value="-45" label="-45"></option>
                  <option value="0" label="0"></option>
                  <option value="45" label="+45"></option>
                  <option value="90" label="+90"></option>
                  <option value="135" label="+135"></option>
                  <option value="180" label="+180"></option>
                </datalist>
              </div>
            </div>
          </div>

          <div class="flex flex-jc-c flex-ai-c" id="page_color">
            <label for="pageColor" id="label_page_color">Page Color</label>
            <input type="color" value="#E7E7E7" id="pageColor" />
          </div>
        </div>

      </div>

      <div><a href="#" id="colorReset">Default Settings</a></div>
    </div>

    <div class="progress_bar_wrapper flex flex-jc-c flex-ai-c">
      <p id="current"></p>
      <div class="progress_bar_box">
        <input type="range" min="0" max="" value="0" id="progress_bar">
      </div>
      <p id="total"></p>
    </div>
    <div id="shortcut_msg">
      Press "Shift + ?" for Shortcuts
    </div>

    <dialog id="shortcuts" data-dialog="false" data-modalopen="false">
      <p id="shortcut_heading">Keyboard shortcuts</p>

      <div id="both_part" class="flex flex-ai-c">
        
        <div id="shortcut_part1" class="flex flex-jc-c">
            <div class="flex each_shortcut">
              <div>Toggle Play/Pause</div>
              <div>Space</div>
            </div>
            <div class="flex each_shortcut">
              <div>Rewind (5 seconds)</div>
              <div>Left Arrow</div>
            </div>
            <div class="flex each_shortcut">
              <div>Rewind (10 seconds)</div>
              <div class="key">J</div>
            </div>
            <div class="flex each_shortcut">
              <div>Fast Forward (5 seconds)</div>
              <div>Right Arrow</div>
            </div>
            <div class="flex each_shortcut">
              <div>Fast forward (10 seconds)</div>
              <div class="key">K</div>
            </div>
            <div class="flex each_shortcut">
              <div>Volume Up (+5%)</div>
              <div>Arrow Up</div>
            </div>
            <div class="flex each_shortcut">
              <div>Volume Down (-5%)</div>
              <div>Arrow Down</div>
            </div>
            <div class="flex each_shortcut">
              <div>Increase Speed (+0.1)</div>
              <div class="key">]</div>
            </div>
            <div class="flex each_shortcut">
              <div>Decrease Speed (-0.1)</div>
              <div class="key">[</div>
            </div>
            <div class="flex each_shortcut">
              <div>Reset Settings</div>
              <div class="key">/</div>
            </div>
          </div>


          <div id="shortcut_part2" class="flex flex-jc-c">
            <div class="flex each_shortcut">
              <div>Default Speed (1.0)</div>
              <div class="key">=</div>
            </div>
            <div class="flex each_shortcut">
              <div>Picture in Picture (PIP)</div>
              <div class="key">P</div>
            </div>
            <div class="flex each_shortcut">
              <div>Full Screen</div>
              <div class="key">F</div>
            </div>
            <div class="flex each_shortcut">
              <div>Toggle Loop</div>
              <div class="key">L</div>
            </div>
            <div class="flex each_shortcut">
              <div>Replay (from start)</div>
              <div class="key">R</div>
            </div>
            <div class="flex each_shortcut">
              <div>Stop Playback</div>
              <div class="key">E</div>
            </div>
            <div class="flex each_shortcut">
              <div>Toggle Mute</div>
              <div class="key">M</div>
            </div>
            <div class="flex each_shortcut">
              <div>Toggle Settings</div>
              <div class="key">S</div>
            </div>
            <div class="flex each_shortcut">
              <div>Toggle Shortcuts</div>
              <div>Shift + ?</div>
            </div>
            <div class="flex each_shortcut">
              <div>Play Another</div>
              <div>Shift + ></div>
            </div>
          </div>


        </div>
    </dialog>

    <div class="controls">
      <button data-control="0" data-enabled="false" id="videoSettingsButton">
        Settings
      </button>
      <div class="speed flex flex-jc-c flex-ai-c">
        <label for="speed-options">Speed</label>
        <select id="speed-options">
          <option value="1.0">Normal</option>
          <option value="0.25">0.25</option>
          <option value="0.5">0.5</option>
          <option value="0.75">0.75</option>
          <option value="1.25">1.25</option>
          <option value="1.5">1.5</option>
          <option value="1.75">1.75</option>
          <option value="2.0">2.0</option>
        </select>
      </div>
      <button data-control="1">
        <img src="assets/icons/media-stop-svgrepo-com.svg" />
      </button>
      <button data-control="2">
        <img src="assets/icons/reload-svgrepo-com.svg" />
      </button>
      <button data-control="3" data-loop="false"></button>
      <button data-control="4">
        <img src="assets/icons/media-seek-backward-svgrepo-com.svg" />
      </button>
      <button data-control="5" data-state="pause"></button>
      <button data-control="6">
        <img src="assets/icons/media-seek-forward-svgrepo-com.svg" />
      </button>
      <div class="volume">
        <button data-control="7" data-volume="medium" id="volumeButton"></button>
        <input type="range" value="60" id="volumeBar" />
        <p id="volume">60%</p>
      </div>
      <button data-control="8" data-pip="false"></button>
      <button data-control="9" id="resetButton">Play Another</button>
    </div>

    <video autoplay loop muted id="backVideo">
      <source id="backvideosource" src="assets/media/3189045-hd_1920_1080_25fps (online-video-cutter.com).mp4"
        type="video/mp4" />
    </video>

    <div class="adblock">
      (Ads are disabled No need of any Ad Blocker)
    </div>

    <div class="intro-msg flex">
      <p>
        Why download a video player when you can simply play your videos with
        the browser?
      </p>
      <p>
        Your videos will not be uploaded anywhere, it is all happening on your
        computer.
      </p>
      <p>It supports all popular video formats (.mp4, .mkv, .webm)</p>
    </div>
    <div class="yt-intro-msg flex">
      <p>
        Why download a video player when you can simply play your videos with
        the browser?
      </p>
      <p>
        Your videos will not be uploaded anywhere, it is all happening on your
        computer.
      </p>
      <p>It supports all popular video formats (.mp4, .mkv, .webm)</p>
    </div>
</body>
<script src="scripts/main.js" type="module"></script>

</html>