And this is why it is dangerous when i start playing with stuff, I am still fiddling with this.
Besides that I can not get the dynamic ids to work in controlling the audio i was wondering how it could be done even if that was working as expected.
This is what I have come up with so far which is kind of working but not quite.
- Start off with a server action to list all the .mp3 in a folder, save
- Add a video component to the page and add width of 300 and height of 55 to make it look nice, check the
controls checkbox.
Now I want as many audio players as there are audio files
- Link my server connect file to the page on page load
- Surround my video component with a repeat children element with an expression of
serverconnect1.data.folderList1
- Add a
dmx-bind:id="basename" to the video element and remove the static ID attribute.
So far so good, I test my page and have 4 .mp3 files all playable and pause-able in their respective video players, each has an ID attribute which matches the filename of the .mp3 excluding the .mp3 extension.
something like this in the browser inspector
<div id="repeat1" is="dmx-repeat">
<video is="dmx-video" controls="" width="300" height="55" src="/assetts/my-first-song.mp3" id="my-first-song"></video>
<video is="dmx-video" controls="" width="300" height="55" src="/assetts/my-second-song.mp3" id="my-second-song"></video>
<video is="dmx-video" controls="" width="300" height="55" src="/assetts/my-third-song.mp3" id="my-third-song"></video>
<video is="dmx-video" controls="" width="300" height="55" src="/assetts/my-fourth-song.mp3" id="my-fourth-song"></video>
</div>
Now to add a dmx-on:play="" to this, I need it to stop every audio player besides the one i am clicking play to, so I can ensure 2 audio files can not play at the same time.
So I need something like this as an inspector type output
<div id="repeat1" is="dmx-repeat">
<video is="dmx-video" controls="" width="300" height="55" src="/assetts/my-first-song.mp3" id="my-first-song" dmx-on:play="my-second-song.pause();my-third-song.pause();my-fourth-song.pause()"></video>
<video is="dmx-video" controls="" width="300" height="55" src="/assetts/my-second-song.mp3" id="my-second-song" dmx-on:play="my-first-song.pause();my-third-song.pause();my-fourth-song.pause()"></video>
<video is="dmx-video" controls="" width="300" height="55" src="/assetts/my-third-song.mp3" id="my-third-song" dmx-on:play="my-first-song.pause();my-second-song.pause();my-fourth-song.pause()"></video>
<video is="dmx-video" controls="" width="300" height="55" src="/assetts/my-fourth-song.mp3" id="my-fourth-song" dmx-on:play="my-first-song.pause();my-second-song.pause();my-third-song.pause()"></video>
</div>
Note that only 3 .pause() commands are on each line as I can not pause the song that I want to play now, I just want to make sure only 1 song is playing at a time.
To achieve this
- Add an array component to the page before the repeat.
- Add a
dmx-bind:items="" to it with a value of serverconnect1.data.folderList1.values(`basename`)
Those are backticks surrounding basename by the way. this gives me a comma separated list of all the song basenames inside my folder.
Now all i need to do is remove the current clicked audio players basename from the array when clicking play, and add it back when pause is clicked, like this
<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.folderList1">
<video is="dmx-video" controls="" width="300" height="55" dmx-bind:src="path" dmx-bind:id="baseneme" dmx-on:play="arr1.remove(basename)" dmx-on:pause="arr1.add(basename)"></video>
</div>
In theory so far it all works pretty well, except for the fact that the dynamic ID currently will not allow control to actually work. My question is now how do I add the entire array of IDs into the dmx-on:play and dmx-on:pause properly. As what I have tried so far is not really working.
Could some of the @wappler_ambassadors possibly give it a try if they have a free moment to spare.
This is my final code currently.
<!doctype html>
<html>
<head>
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="/dmxAppConnect/dmxVideo/dmxVideo.js" defer=""></script>
<script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
</head>
<body is="dmx-app" id="folderlistaudio">
<dmx-serverconnect id="serverconnect1" url="/dmxConnect/api/folder-listing-assets.php"></dmx-serverconnect>
<div class="container">
<div class="row">
<div class="col-6">
<!-- Replace all hyphen/dashes with nothing and add .pause() to the end -->
<dmx-array id="arr1" dmx-bind:items="serverconnect1.data.folderList1.values(`basename.replace('-','').concat('.pause()')`)"></dmx-array>
{{arr1.items}}
<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.folderList1">
<video dmx-bind:id="basename.replace('-','')" is="dmx-video" controls width="300" height="55" dmx-bind:src="path" dmx-on:play="arr1.remove(basename.replace('-','').concat('.pause()'));arr1.items"
dmx-on:pause="arr1.add(basename.replace('-','').concat('.pause()'))"></video>
</div>
</div>
<div class="col-6">
<!-- Static players with same IDs for testing controls, no hyphens/dashes allowed in the ID or on:play/pause or it breaks control -->
<video is="dmx-video" id="MyFirstSong" src="/assetts/My-First-Song.mp3" controls width="300" height="55" dmx-on:play="MySecondSong.pause()"></video>
<video is="dmx-video" id="MySecondSong" src="/assetts/My-Second-Song.mp3" controls width="300" height="55" dmx-on:play="MyFirstSong.pause()"></video>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Sorry for confusing you with Patrick)
