Using a media player with Playlists

Nmaster88
@nmaster88
8 years ago
94 posts

I'm trying to find a way to use a media player that plays a playlist in my custom skin.
What we are trying to do is adding a player at the bottom where the user can then add musics that are displayed on the site with a "add to playlist" button.

I know i can use the module jrPlaylist for doing that.
So i added the code

{jrCore_media_player type="jrPlaylist_player_dark" module="jrPlaylist"}

Well, and it obviously says theres no media, i need to pass some items, and the datastore of this module is empty.
From this video
https://www.jamroom.net/the-jamroom-network/documentation/modules/285/playlists
[updated]it seems that it appears a tab of playlist on the profiles, and with that the user can create a playlist going to artists profile and adding the musics.

Can i do something similar but to the index page, where a user can click on the musics like its on the photo, and they go to the playlist of the player?

How can i do this? Thanks

updated by @nmaster88: 05/23/16 11:53:48PM

@michael
8 years ago
7,715 posts

Try adding:

{jrCore_module_function function="jrPlaylist_button" playlist_for="jrAudio" item_id=$item._item_id title="Add To Playlist"}

To the row template that generates the image, that should add the 'add to playlist' button for the user to create a playlist.

Nmaster88
@nmaster88
8 years ago
94 posts

Thank you, Michael that works!

I want to do something like this,
the user when is logged in he can do he's own playlists,
but when he's logged out he can still use the player and add musics to it, how can i do that?
Created a default user to use the playlists when no one is logged in?

Another question, i want the player to have the layout (i will show on the image), shall i create a copy of the jrPlaylist module and create there a template and change the css code?

Thanks.

updated by @nmaster88: 02/20/16 05:04:43AM

@michael
8 years ago
7,715 posts

Thats the way it works. If the user is logged out they can create a playlist and when they create an account that playlist gets saved to their profile.

Nmaster88
@nmaster88
8 years ago
94 posts

Ok thanks, didn't test it.
Another question, does jquery jPlayer library works on jamroom or i really have to use the jamroom playlist module?
And if i want to do changes, to the playlist module, like template and css files, shall i create a copy of it with a different name? I think i've seen something about it.

@michael
8 years ago
7,715 posts

prefer other questions to go under their own heading in a new thread where possible as it helps others coming later who search for answers.

quite hard to understand you're follow up question sorry. I think its "can I use a player other than the default one for playing the playlists?" If it is then YES you can, you'd copy the template of the module you want to over-ride to your skin and prefix it with the modules name. so

/modules/jrPlaylist/templates/item_list.tpl
would be over-ridden at:
/skins/(YOUR SKIN)/jrPlaylist_item_list.tpl

--edit--
Docs: "Altering a Modules template"
https://www.jamroom.net/the-jamroom-network/documentation/development/1051/altering-a-modules-template
updated by @michael: 02/22/16 01:17:58PM

Nmaster88
@nmaster88
8 years ago
94 posts

Maybe the question is hard to understand.

What happens is the follow, i dont know much of jQuery, and i'm trying to have the player on the image to work.
In my skin i have in "skin/js/" the "jPlayer" library and its not working, i mean the play button plays nothing, and my question is if there is a problem with it in Jamroom, but my guess is not...
I'm adding the items to the playlist this way:

template with items

<a href="#"  id="addmusictolist" data-title="{$item.audio_title_url}" data-artist="{$item.audio_file_artist}" data-mp3="{$jamroom_url}/{$item.profile_url}/audio/{$item._item_id}/{$item.audio_file_name}" data-poster="{$jamroom_url}/{$item.profile_url}/audio/{$item._item_id}/{$item.profile_image_name}">

in jPlayer/demo.js i populate the playlist

  $(document).on('click','#addmusictolist',function(){
    myPlaylist.add(
        {
         title:  $(this).attr('data-title'),
          artist:  $(this).attr('data-artist'),
          mp3: $(this).attr('data-mp3'),
          poster: $(this).attr('data-poster'),
        }
    )

  }
  )

I was thinking, can the jquery get access to the mp3 file that way?
It can be that this is not a problem related to Jamroom, but i'm thankful for all the help

updated by @nmaster88: 02/22/16 01:52:26PM

@michael
8 years ago
7,715 posts

try putting a static .mp3 file in the root of your system
/data/*
/modules/*
/skins/*
some-music-file.mp3

the url to that will be as expected:
http://YOUR-SITE.com/some-music-file.mp3

If you can get that to play first, then move to swapping that out to the jamroom url it should be easier to understand which part is causing trouble.

Nmaster88
@nmaster88
8 years ago
94 posts

@michael doing that simple test it worked thanks,
it seems i'm having a hard time to find the url path to the audio musics that are on the profiles.
updated by @nmaster88: 02/22/16 02:47:51PM

@michael
8 years ago
7,715 posts

If you look in the source code of a playlist page, you will see the paths:

.....
        new jPlayerPlaylist( {
            jPlayer: "#jquery_jplayer_mKVyZRclSwUrAi",
            cssSelectorAncestor: "#jp_container_mKVyZRclSwUrAi"
        } , [
                        {
                title: "[audio] Song one ",
                artist: "admin",
                module: "jrPlaylist",
                item_id: "1",
                mp3: "http://jr500.hostsaba.com/uploaded_audio/stream/audio_file/1/key=G36hPE3VFysP/file.mp3",
                                poster: "http://jr500.hostsaba.com/uploaded_audio/image/audio_image/1/xxxlarge/image.jpg"
    } ,
                {
                title: "[audio] opera",
                artist: "admin",
                module: "jrPlaylist",
                item_id: "2",
                mp3: "http://jr500.hostsaba.com/uploaded_audio/stream/audio_file/2/key=G36hPE3VFysP/file.mp3",
                                poster: "http://jr500.hostsaba.com/uploaded_audio/image/audio_image/2/xxxlarge/image.jpg"
    } ,
                {
                title: "[audio] rain sounds",
                artist: "admin",
                module: "jrPlaylist",
                item_id: "3",
                mp3: "http://jr500.hostsaba.com/uploaded_audio/stream/audio_file/3/key=G36hPE3VFysP/file.mp3",
                                poster: "http://jr500.hostsaba.com/uploaded_audio/image/audio_image/3/xxxlarge/image.jpg"
    } ,
.....

If you look in the .tpl of the smarty file that generates those urls you will see how they are constructed there, eg:
/modules/jrAudio/templates/jrAudio_black_overlay_player.tpl

.....
        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_{$uniqid}",
            cssSelectorAncestor: "#jp_container_{$uniqid}"
        },[
            {if is_array($media)}
            {foreach $media as $a}
            {if $a._item.$ext == 'mp3'}
            {
                title: "{$a.title}",
                artist: "{$a.artist}",
                mp3: "{$jamroom_url}/{$a.module_url}/stream/{$params.field}/{$a.item_id}/key=[ jrCore_media_play_key]/file.mp3",
                {if strstr($formats, 'oga')}
                oga: "{$jamroom_url}/{$a.module_url}/stream/{$params.field}/{$a.item_id}/key=[ jrCore_media_play_key]/file.ogg",
                {/if}
                poster: "{$jamroom_url}/{$a.module_url}/image/audio_image/{$a.item_id}/large"
            },
            {/if}
            {/foreach}
            {/if}
        ],{
.....

The key=[ jrCore_media_play_key] is replaced by a key to check that the file is being played from the site. If you dont care, you can disable the check by adding ALLOW_ALL_DOMAINS at:
ACP -> CORE -> SYSTEM CORE -> GLOBAL CONFIG -> GENERAL
(screenshot)

updated by @michael: 02/22/16 02:49:14PM

Nmaster88
@nmaster88
8 years ago
94 posts

Cool, you're helping a lot,

but how can i access the jrCore_media_play_key?
I want to play it on the site using the jPlayer library.

@michael
8 years ago
7,715 posts

jamroom seams to search for it everywhere, when I put the code in here it was found and replaced, see:
[ jrCore_media_play_key]
1

try it without the space

Using a media player with Playlists

Tags