0
I have no real need for the individual song page and would prefer it if clicking the block of the song played it instead of going to the song page.

Can this be done with a quick code change on my part?
Responses (11)
  • Accepted Answer

    Thursday, November 28 2019, 10:44 AM - #Permalink
    0
    Never mind. I figured it out myself:

    In components/com_muscol/templates/template_song.php:

    Change line 20 from

    <tr class="song-item" {{#if isplayable}}data-isplayable{{/if}} data-id="{{id}}" data-type="song" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">


    to

    <tr class="song-item" {{#if isplayable}}data-isplayable{{/if}} data-id="{{id}}" data-type="song" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" onclick="play_song(jQuery(this));" data-id="{{id}}">


    and change line 35 from

     <a class="templateSongLink" href="/{{link}}"><div class="name" itemprop="name">{{name}}</div></a>


    to

    <div class="name" itemprop="name">{{name}}</div>
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, November 28 2019, 10:46 AM - #Permalink
    0
    Hmm, however this now plays the song when I click the "buy" button, and doesn't stop when I click the pause button on the thumbnail. It'd be great if someone would actually help with this.
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, November 28 2019, 10:55 AM - #Permalink
    0
    Nope - I did figure it out!

    Don't edit line 20, leave it as it is.

    Change line 22 from

    <td class="song">


    to

    <td class="song" onclick="play_song(jQuery(this));" data-id="{{id}}">


    and change line 28 from

    <div class="playPauseSongBtn" onclick="play_song(jQuery(this));" data-id="{{id}}"></div>


    to

    <div class="playPauseSongBtn"></div>


    This makes the song play or stop when you click anywhere up to the duration. You still need to change line 35 as above.

    I'm a bit disappointed at the "support" paying customers get.
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, November 28 2019, 10:57 AM - #Permalink
    0
    No again, this hasn't worked. Now all songs play the first song.
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, November 28 2019, 11:22 AM - #Permalink
    0
    hi
    if you add the data-id="{{id}}" to the element you're clicking on, doesn't it do the trick?
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, November 28 2019, 11:29 AM - #Permalink
    0
    You can see here I have, and wherever I add the code to play the song it always plays the first track:

    <td class="song" onclick="play_song(jQuery(this));" data-id="{{id}}">
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, November 28 2019, 11:34 AM - #Permalink
    0
    could you send me a link to this page?
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, November 28 2019, 11:42 AM - #Permalink
    0
    The reply is currently minimized Show
  • Accepted Answer

    Friday, November 29 2019, 06:38 PM - #Permalink
    0
    Any thoughts on this? I've left it non-functioning for you to see and I'd rather not leave it that way for long.
    • Germinal Camps
      more than a month ago
      I'm checking it. I haven't found a solution yet. Not sure why when you put the code on the main element, only the first song plays.
    The reply is currently minimized Show
  • Accepted Answer

    Friday, November 29 2019, 06:53 PM - #Permalink
    0
    Ok man, just checking.
    The reply is currently minimized Show
  • Accepted Answer

    Saturday, November 30 2019, 10:30 AM - #Permalink
    0
    By the way, here's the code as it is at the moment, just to make sure I haven't made a silly error somewhere:

    <tr class="song-item" {{#if isplayable}}data-isplayable{{/if}} data-id="{{id}}" data-type="song" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">

    <td class="song" onclick="play_song(jQuery(this));" data-id="{{id}}">
    <div class="song-image-wrapper" style="background: url('data:image/jpg;base64,{{base64_img}}') center / cover;">
    <meta itemprop="image" content="{{thumbnail_src}}" />
    <div class="imagediv" style="background: url('/{{thumbnail_src}}') center / cover;"></div>
    <?php if (JFactory::getUser()->authorise('muscol.displayplayer', 'com_muscol') ) { ?>
    {{#if isplayable}}
    <div class="playPauseSongBtn"></div>
    {{/if}}
    <?php } ?>
    </div>
    The reply is currently minimized Show
Your Reply