MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Spotify

    Scheduled Pinned Locked Moved General Discussion
    4 Posts 3 Posters 8.7k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T Offline
      Tomekkkkk
      last edited by KirAsh4

      Moin moin!

      Now I have managed to finally integrate the spotify connect server . Although is probably not an elegant solution but hey , it works… I used an iframe therefore. I can control this with the normal Spotify App

      Bild Text

      First of all is to install the Spotify Server. I used this tutorial: http://www.forum-raspberrypi.de/Thread-tutorial-spotify-connect-server-headless-standalone

      I would recommend that the automatic start is delayed with 120 seconds , as otherwise the scs will launch before the magic mirror and there will no frame. When the server is running i got a new webpage running on the Raspberry with http://localhost:4000
      I tried to extract the data for the actual playing title with curl but i am not an app programmer, so i used an frame instead.

      To change the background of the SCS webpage and get it compatible to the MagicMirror i added the next to
      sudo nano ./spotify-connect-web-chroot/usr/src/app/templates/index.html

      .container{
             padding-left: 0px;
          }
      
      
      .container:after{
              background-colour: black!important;
              padding-left: 0px;
          }
      body {
          width: 450px;
          background-color: black;
          font-family:"robot";
          font-color: white;
      }
      
      .well{
          background-color: black;
          border: none
      }
      .thumbnail{
          background-color: black;
          border: none
      
      }
      .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
          font-family: "roboto";
          font-weight: 500;
          line-height: 1.1;
          color: white;
      }
      .thumbnail a>img, .thumbnail>img {
          margin-right: auto;
          margin-left: 20px;
          height: 100px;
      }
      
      
      .text-center {
          text-align: left;
      }
      
      .col-sm-6{
          padding-left: 0px;
      }
      
      p {
          margin: 0 0 10px;
          visibility: hidden;
      }
      

      And at the MagicMirror Index.html i added this:
      '<div class="region bottom left"><div class="container"><iframe width="450" height="315" src="http://localhost:4000" frameborder="0" allowfullscreen></iframe></div></div>'

      et voilà

      Maybe someone knows a better solution?

      Note from Moderator: Please use Markdown on code snippets for easier reading.

      1 Reply Last reply Reply Quote 0
      • paviroP Offline
        paviro Admin
        last edited by

        I moved this into the general discussion category since it isn’t a real module (yet?).

        We're all stories in the end. Just make it a good one, eh?

        – The Doctor

        1 Reply Last reply Reply Quote 0
        • Wilco89W Offline
          Wilco89
          last edited by

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • Wilco89W Offline
            Wilco89
            last edited by

            This post is deleted!
            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy