Gelmo/Song.html

## Song.html
<!DOCTYPE html>

<!-- Notes:
  - This is a slight adjustment to Zyphen's Now Playing overlay, available at https://obsproject.com/forum/resources/zyphens-now-playing-overlay.1026/
  - Download Zyphen's Now Playing overlay and save the files wherever you would like
  - Replace the contents of the Song.html file with this Gist
  - In Pretzel, go to Settings > FILE OUTPUT
    - Enable "Save Album Cover to file" and save the file in the same directory as the other files you downloaded
      - The file name must be album.jpg
    - Enable "Save Now Playing JSON Data to file" and save the file in the same directory as the other files you downloaded
      - The file name must be nowplaying.json
  - You can open the Editor.html file in your browser to adjust the styling; refer to the link above for more information
  - Open OBS
    - Add a browser source
    - Check Local file
    - Point OBS to Song.html
    - Set the dimensions to 350 by 70
  - If you would prefer a single file instead, refer to https://gist.github.com/Gelmo/f3d5fe50206aadbbd786e842110c8d92
-->

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Now Playing</title>
    <link rel="stylesheet" href="SongStyle.css" />
    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
    <script>
      var newSong;
      var newArtist;
      var shown = false;
      function hideText() {
        $("#artist").animate(
          {
            marginLeft: "-100px",
            opacity: 0,
          },
          300
        );
        $("#song").animate(
          {
            marginLeft: "-100px",
            opacity: 0,
          },
          300
        );

        document.getElementById("song").classList.remove("scrolling");
        document.getElementById("artist").classList.remove("scrolling");
      }

      function updateText() {
        document.getElementById("artist").innerHTML = newArtist;
        document.getElementById("song").innerHTML = newSong;
      }

      function showText() {
        if (document.getElementById("artist").clientWidth > 260) {
          $("#artist").animate(
            {
              marginLeft: "290px",
              opacity: 1,
            },
            300,
            function () {
              $("#artist").css("margin-left", "7px");
              console.log("changed");
            }
          );
        } else {
          $("#artist").animate(
            {
              marginLeft: "7px",
              opacity: 1,
            },
            300
          );
        }
        if (document.getElementById("song").clientWidth > 260) {
          $("#song").animate(
            {
              marginLeft: "290px",
              opacity: 1,
            },
            300,
            function () {
              console.log("lngsong");
              $("#song").css("margin-left", "7px");
            }
          );
        } else {
          $("#song").animate(
            {
              marginLeft: "7px",
              opacity: 1,
            },
            300
          );
        }

        if (document.getElementById("song").clientWidth > 260)
          setTimeout(function () {
            document.getElementById("song").classList.add("scrolling");
          }, 300);
        if (document.getElementById("artist").clientWidth > 260)
          setTimeout(function () {
            document.getElementById("artist").classList.add("scrolling");
          }, 300);
        console.log(document.getElementById("song").clientWidth);
      }

      function checkUpdate() {
        $.getJSON("nowplaying.json", function (npinfo) {
          newArtist = npinfo.track.artistsString.replace(/&/g, "&amp;");
          newSong = npinfo.track.title.replace(/&/g, "&amp;");
        }).then(displayData);

        setTimeout(checkUpdate, 2000);
      }

      function displayData() {
        if (newSong != document.getElementById("song").innerHTML) {
          if (newSong.length > 1 && !shown) {
            $("#bigdiv").animate(
              {
                marginLeft: "0px",
              },
              500
            );
            shown = true;
          }
          if (newSong.length < 1 && shown) {
            $("#bigdiv").animate(
              {
                marginLeft: "-500px",
              },
              500
            );
            shown = false;
          }
          console.log(
            "New song, old song: " +
              document.getElementById("song").innerHTML +
              " new song: " +
              newSong
          );
          hideText();
          setTimeout(updateText, 300);
          setTimeout(showText, 400);
          var imgpath = "album.jpg?t=" + newSong + newArtist;
          document.getElementById("image").setAttribute("src", imgpath);
          $("#image2").fadeOut(500, function () {
            document.getElementById("image2").setAttribute("src", imgpath);
            $("#image2").show();
          });
        }
      }

      $(document).ready(checkUpdate);
    </script>
  </head>
  <body>
    <div id="bigdiv">
      <img id="image" />
      <img id="image2" src="album.jpg" />
      <div id="smalldiv">
        <p id="artist"></p>
        <br />
        <p id="song"></p>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>

	<!-- Notes:
	- This is a slight adjustment to Zyphen's Now Playing overlay, available at https://obsproject.com/forum/resources/zyphens-now-playing-overlay.1026/
	- Download Zyphen's Now Playing overlay and save the files wherever you would like
	- Replace the contents of the Song.html file with this Gist
	- In Pretzel, go to Settings > FILE OUTPUT
	- Enable "Save Album Cover to file" and save the file in the same directory as the other files you downloaded
	- The file name must be album.jpg
	- Enable "Save Now Playing JSON Data to file" and save the file in the same directory as the other files you downloaded
	- The file name must be nowplaying.json
	- You can open the Editor.html file in your browser to adjust the styling; refer to the link above for more information
	- Open OBS
	- Add a browser source
	- Check Local file
	- Point OBS to Song.html
	- Set the dimensions to 350 by 70
	- If you would prefer a single file instead, refer to https://gist.github.com/Gelmo/f3d5fe50206aadbbd786e842110c8d92
	-->

	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Now Playing</title>
	<link rel="stylesheet" href="SongStyle.css" />
	<script
	src="https://code.jquery.com/jquery-3.5.1.min.js"
	integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
	crossorigin="anonymous"
	></script>
	<script>
	var newSong;
	var newArtist;
	var shown = false;
	function hideText() {
	$("#artist").animate(
	{
	marginLeft: "-100px",
	opacity: 0,
	},
	300
	);
	$("#song").animate(
	{
	marginLeft: "-100px",
	opacity: 0,
	},
	300
	);

	document.getElementById("song").classList.remove("scrolling");
	document.getElementById("artist").classList.remove("scrolling");
	}

	function updateText() {
	document.getElementById("artist").innerHTML = newArtist;
	document.getElementById("song").innerHTML = newSong;
	}

	function showText() {
	if (document.getElementById("artist").clientWidth > 260) {
	$("#artist").animate(
	{
	marginLeft: "290px",
	opacity: 1,
	},
	300,
	function () {
	$("#artist").css("margin-left", "7px");
	console.log("changed");
	}
	);
	} else {
	$("#artist").animate(
	{
	marginLeft: "7px",
	opacity: 1,
	},
	300
	);
	}
	if (document.getElementById("song").clientWidth > 260) {
	$("#song").animate(
	{
	marginLeft: "290px",
	opacity: 1,
	},
	300,
	function () {
	console.log("lngsong");
	$("#song").css("margin-left", "7px");
	}
	);
	} else {
	$("#song").animate(
	{
	marginLeft: "7px",
	opacity: 1,
	},
	300
	);
	}

	if (document.getElementById("song").clientWidth > 260)
	setTimeout(function () {
	document.getElementById("song").classList.add("scrolling");
	}, 300);
	if (document.getElementById("artist").clientWidth > 260)
	setTimeout(function () {
	document.getElementById("artist").classList.add("scrolling");
	}, 300);
	console.log(document.getElementById("song").clientWidth);
	}

	function checkUpdate() {
	$.getJSON("nowplaying.json", function (npinfo) {
	newArtist = npinfo.track.artistsString.replace(/&/g, "&");
	newSong = npinfo.track.title.replace(/&/g, "&");
	}).then(displayData);

	setTimeout(checkUpdate, 2000);
	}

	function displayData() {
	if (newSong != document.getElementById("song").innerHTML) {
	if (newSong.length > 1 && !shown) {
	$("#bigdiv").animate(
	{
	marginLeft: "0px",
	},
	500
	);
	shown = true;
	}
	if (newSong.length < 1 && shown) {
	$("#bigdiv").animate(
	{
	marginLeft: "-500px",
	},
	500
	);
	shown = false;
	}
	console.log(
	"New song, old song: " +
	document.getElementById("song").innerHTML +
	" new song: " +
	newSong
	);
	hideText();
	setTimeout(updateText, 300);
	setTimeout(showText, 400);
	var imgpath = "album.jpg?t=" + newSong + newArtist;
	document.getElementById("image").setAttribute("src", imgpath);
	$("#image2").fadeOut(500, function () {
	document.getElementById("image2").setAttribute("src", imgpath);
	$("#image2").show();
	});
	}
	}

	$(document).ready(checkUpdate);
	</script>
	</head>
	<body>
	<div id="bigdiv">
	<img id="image" />
	<img id="image2" src="album.jpg" />
	<div id="smalldiv">
	<p id="artist"></p>
	<br />
	<p id="song"></p>
	</div>
	</div>
	</body>
	</html>