Skip to Content
It is currently March 7th, 2021, 4:30 am

All times are UTC - 6 hours [ DST ]




Post new topic Reply to topic  [ 10 posts ] 
Author Message
 Post subject: "Time Left" countown?
PostPosted: March 3rd, 2018, 12:02 am 
Offline
Senior User
Senior User

Joined: July 23rd, 2007, 2:22 am
Posts: 141
I'm trying to find an html script that will allow me to show the time left of the song that is currently playing. Does such a thing exist? Can one easily be included? Does anyone else want to show this info?

I got the idea from Sam2Joom. It shows the time left of the currently playing song, and I thought it would be a great addition to the pages!

Thanks

_________________
Park Magic Radio
http://parkmagicradio.ca


Top
 Profile  
Reply with quote  
PostPosted: March 3rd, 2018, 3:35 pm 
Offline
SVS Member
SVS Member

Joined: May 8th, 2004, 9:00 am
Posts: 10527
Location: Denver, CO
it's done using php and javascript

_________________
- Rob Oyler, SVS
Image


Top
 Profile  
Reply with quote  
PostPosted: March 4th, 2018, 5:17 pm 
Offline
Senior User
Senior User

Joined: July 23rd, 2007, 2:22 am
Posts: 141
What I was hoping was if someone could share theirs with me. Sorry if my message wasn't clear.

_________________
Park Magic Radio
http://parkmagicradio.ca


Top
 Profile  
Reply with quote  
PostPosted: March 5th, 2018, 11:21 am 
Offline
SVS Member
SVS Member

Joined: May 8th, 2004, 9:00 am
Posts: 10527
Location: Denver, CO
Since you asked, I'll share it with you however it's NOT plug'n'play you'll have to figure out how to incorporate it into your web page. My site is ajax based.

basic function:
Code:
    <script type="text/javascript">
      function countDown()
      {
        countDownTime--;

        if ( countDownTime == 0 )
        {
          countDownTime = countDownInterval;

          if ( window.parent.active_module == "Now Playing" )
          {
            window.parent.getNowPlaying();
          }

          window.location.reload();

          return;
        }
        else if ( countDownTime < 0 )
        {
          countDownTime = 10;
        }

        if ( window.parent.document.getElementById( "countDownText" ) )
        {
          window.parent.document.getElementById( "countDownText" ).innerHTML = secsToMins( countDownTime );
        }
      }

      function secsToMins( theValue )
      {
        var theMin = Math.floor( theValue / 60 );
        var theSec = ( theValue % 60 );

        if ( theSec < 10 )
        {
          theSec = "0" + theSec;
        }

        return( theMin + ":" + theSec );
      }

      var countDownInterval = <?php echo( $secs_remain ); ?>;
      var countDownTime = countDownInterval + 1;
      setInterval ( "countDown();", 1000 );
    </script>

Create statement for now playing view
Code:

CREATE ALGORITHM
=UNDEFINED DEFINER=`root`@`localhost` SQL SECURITY DEFINER VIEW `samdb`.`fhr_now_playing_view` AS select `s`.`ID` AS `song_id`,`h`.`requestID` AS `requestID`,`s`.`artist` AS `artist`,`s`.`fhr_artistID` AS `artist_id`,`s`.`album` AS `album`,`s`.`fhr_albumID` AS `album_id`,`s`.`title` AS `title`,`s`.`duration` AS `duration`,`s`.`albumyear` AS `album_year`,`s`.`genre` AS `genre`,`s`.`composer` AS `composer`,`s`.`trackno` AS `trackno`,`s`.`lyrics` AS `lyrics`,`s`.`info` AS `info`,`s`.`picture` AS `picture`,`s`.`count_played` AS `count_played`,`s`.`count_requested` AS `count_requested`,`s`.`last_requested` AS `last_requested`,`s`.`count_performances` AS `count_performances`,`s`.`votes` AS `votes`,`s`.`rating` AS `rating`,`s`.`songtype` AS `songtype`,`s`.`date_added` AS `date_added`,`s`.`date_played` AS `date_played`,unix_timestamp() AS `database_time` from (`samdb`.`songlist` `s` join `samdb`.`historylist` `h`) where ((`s`.`ID` = `h`.`songID`) and ((`s`.`songtype` = _latin1'S') or (`s`.`songtype` = _latin1'C') or (`s`.`songtype` = _latin1'V'))) order by `h`.`ID` desc limit 1;

setup
Code:
  $result = mysqli_query( $samDB, "select * from fhr_now_playing_view" );
  $now_playing = mysqli_fetch_array( $result );
  $secs_remain = ( round( $now_playing["duration"] / 1000 ) - (( $now_playing["database_time"]) - strtotime($now_playing["date_played"] ) ) );
  $secs_remain = $secs_remain-2; //adjust refresh time here if needed +xx seconds delays refresh -xx seconds advances refresh -RO

actual display of the countdown timer next to the now playing track info
Code:
                 <tr>
                    <td align=right><b>Duration:</b></td>
                    <td>&nbsp;&nbsp;</td>
                    <td align=left><?php echo( $mmss ); ?>  (Remain: <b id="countDownText"></b>)</td>
                  </tr>

_________________
- Rob Oyler, SVS
Image


Top
 Profile  
Reply with quote  
PostPosted: March 5th, 2018, 3:40 pm 
Offline
SVS Member
SVS Member

Joined: December 6th, 2004, 9:00 am
Posts: 8156
Location: Cologne (Germany)
For the HTML or the PHP template?

In PHP:
Put this into display.playing.php, right before <!-- BEGIN:CURRENTLY PLAYING --> (there should be an empty line already that you can (ab)use.
Code:
<?php
$durationSeconds = $currentSong->duration / 1000; // duration is given in microseconds
$date_ends = strtotime($currentSong->date_played) + $durationSeconds;
$timeRemaining = $date_ends - time();
?>

<script>function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var remaining=<?=$timeRemaining; ?>;
        display = document.querySelector('#currently-playing-remaining');
    startTimer(remaining, display);
};
</script>


I'd suggest adding another column to display the time remaining right after the Time column (the first th section is already there, I just included it to show you where to insert the new column header):
Code:
                        <th align="right" style="width: 50px;">
                           Time
                        </th>
                        <th align="right" style="width: 50px;">
                           Remaining
                        </th>


Code:
                        <td align="right">
                           <span id="currently-playing-duration"><?php echo $currentSong->durationDisplay; ?></span>
                        </td>
                        <td align="right">
                           <span id="currently-playing-remaining">Calculating remaining time...</span>
                        </td>


This will show a countdown based on the server time. Make sure to have your SAM and server times synchronized otherwise this will obviously not work at all. (And obviously the countdown will be off by whatever delay your stream server has over your actual SAM encoding.)


This is untested and I'm not sure if it works. I just wrote this off the top of my head (while looking at the sourcecode of the display.playing.php).
If you run into problems, you'll have to fix them yourself or pay me to do so. :P (no, really this is already way more than I usually do for free, I just had some spare time while resurrecting my 5 year old spare phone with some new software)

_________________
Benedikt Bauer - SVS (Spacial Volunteer Support)

Shop for readymade PAL scripts by countrywesterndj - Or get a custom script made by me (or others)

My Project:
Send "Now Playing" from SAM to Twitter and/or Facebook | Sourcecode


Top
 Profile  
Reply with quote  
PostPosted: May 30th, 2018, 10:33 pm 
Offline
Senior User
Senior User

Joined: July 23rd, 2007, 2:22 am
Posts: 141
@Masacheata, you are a genius! Have a look! I have to get it aligned a bit, but the remaining time countdown works!!

Thank you very much!

_________________
Park Magic Radio
http://parkmagicradio.ca


Top
 Profile  
Reply with quote  
PostPosted: June 2nd, 2018, 2:23 pm 
Offline
Senior User
Senior User

Joined: July 23rd, 2007, 2:22 am
Posts: 141
Is there a way to get the countdown to stop at "0:00" until the next song starts playing and the page refreshes? If I'm listening to the song and there are about 5 or 10 seconds left to play, and if watching the countdown at the same time, the countdown will go into a "negative" time mode and look something like this: -2:04-2 (or something like that). So if I could get it to stop at 0:00 once it finishes, then wait for the page to refresh before starting the countdown again for the next song, my site would be working perfectly! If you can help, thanks, but no pressure!

_________________
Park Magic Radio
http://parkmagicradio.ca


Top
 Profile  
Reply with quote  
PostPosted: June 4th, 2018, 2:34 am 
Offline
SVS Member
SVS Member

Joined: December 6th, 2004, 9:00 am
Posts: 8156
Location: Cologne (Germany)
Sure, this should keep the timer from ever going into negative numbers and should display a zero time while waiting for the next refresh of the page (usually every 5 seconds):
Code:
<script>function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        if (timer < 0) {
            timer = 0;
        }
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        --timer;
    }, 1000);
}

window.onload = function () {
    var remaining=<?=$timeRemaining; ?>;
        display = document.querySelector('#currently-playing-remaining');
    startTimer(remaining, display);
};
</script>

_________________
Benedikt Bauer - SVS (Spacial Volunteer Support)

Shop for readymade PAL scripts by countrywesterndj - Or get a custom script made by me (or others)

My Project:
Send "Now Playing" from SAM to Twitter and/or Facebook | Sourcecode


Top
 Profile  
Reply with quote  
PostPosted: June 5th, 2018, 9:51 am 
Offline
Senior User
Senior User

Joined: July 23rd, 2007, 2:22 am
Posts: 141
As always, it works like a charm. Thank you again, Mastacheata!!

_________________
Park Magic Radio
http://parkmagicradio.ca


Top
 Profile  
Reply with quote  
PostPosted: February 20th, 2020, 10:31 am 
Offline
Junior User
Junior User

Joined: January 21st, 2013, 9:33 pm
Posts: 34
Mastacheata wrote:
This will show a countdown based on the server time. Make sure to have your SAM and server times synchronized otherwise this will obviously not work at all. (And obviously the countdown will be off by whatever delay your stream server has over your actual SAM encoding.)


I know this is old but in case someone wants this and having issue with synchronizing, just need to add the offset time difference, mine is -3600

Code:
<?php
$durationSeconds = $currentSong->duration / 1000; // duration is given in microseconds
$date_ends = strtotime($currentSong->date_played) + $durationSeconds;
$timeRemaining = $date_ends - time()-3600;
?>

_________________
Never a dull moment at MIXROCKMETAL.COM ~ UP THE IRONS \m/


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 10 posts ] 

All times are UTC - 6 hours [ DST ]


Who is online

Users browsing this forum: Bing [Bot] and 24 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group