How to add videos to the carousel?

[harrychengly]

I am trying to append my videos generated to the carousel but doesn't seem to work. For now I understand that it needs to be included in an array before it could display on the page. It would be of great help if I could look at your demo's source code.

[sheikalthaf]

hi, what type of video u want to play. shall i have more details about your issue

[harrychengly]

Like a web streaming video created by SkylinkJS. You can find out more at: https://skylink.io/ I want to append to the carousel but there is no way of doing so without adding it to the array which I am unable to do so.

[sheikalthaf]

You don't need an Array to append. carousel support static method too.

<ngx-carousel
        [inputs]="carouselOne">
          <ngx-item NgxCarouselItem>
              <!--  your video div -->
          </ngx-item>
          <ngx-item NgxCarouselItem>
              <!--  your video div -->
          </ngx-item>
          <ngx-item NgxCarouselItem>
              <!--  your video div -->
          </ngx-item>
          <button NgxCarouselPrev class='leftRs'>&lt;</button>
          <button NgxCarouselNext class='rightRs'>&gt;</button>
    </ngx-carousel>

[harrychengly]

Would there be a way to generate from the TypeScript without adding to array?

[sheikalthaf]

Really can't understand your problem. Array not mandatory to the carousel.

[harrychengly]

What is NgxCarouselItem? is it a class , a name or a value?

[sheikalthaf]

it is a directive

[harrychengly]

var vidID = this.generateUUID() //to generate UUID for video

this.sl.on('incomingStream', function(peerId, stream, isSelf) {
  if(isSelf) return;
  var vid = document.getElementById(peerId);
  var tilecreation=document.getElementById('tilecreation')
   var createTiles = document.createElement("ngx-item")
   tilecreation.appendChild(createTiles)
   createTiles.id=vidID
   var videoAttached = document.getElementById(vidID)
    videoAttached.appendChild(vid)
   AdapterJS.attachMediaStream(vid, stream);
});

I am trying to create an ngx-item when i click on the button. How do I add the directive when creating element? Appreciate if you can help me with this. Been stuck for many hours figuring this out.

[sheikalthaf]

var vidID = this.generateUUID() //to generate UUID for video

this.sl.on('incomingStream', function(peerId, stream, isSelf) {
if(isSelf) return;
var vid = document.getElementById(peerId);
var tilecreation=document.getElementById('tilecreation')
var createTiles = document.createElement("ngx-item")

createTiles.setAttribute("NgxCarouselItem", "");  // inserted the directive

tilecreation.appendChild(createTiles)
createTiles.id=vidID
var videoAttached = document.getElementById(vidID)
videoAttached.appendChild(vid)
AdapterJS.attachMediaStream(vid, stream);
});`

Don't know whether it is working or not. directive selector is an attribute

[sheikalthaf]

try the above code. i have inserted the new line

[harrychengly]

It worked but apparently I need to place it under the <div _ngcontent-c1="" class="som ngxcarouselbnpIpb"> in order for the tiles to appear. Cause apparently it is just appearing as its not styled as the carousel looked liked.

[harrychengly]

Here is my html code:

<div class="studentClassContainer">
  <ngx-carousel id="tilecreation" [inputs]="carouselTile">
    <button NgxCarouselPrev class='leftRs'><</button>
    <button NgxCarouselNext class='rightRs'>></button>
  </ngx-carousel>
</div>

[sheikalthaf]

var vidID = this.generateUUID() //to generate UUID for video

this.sl.on('incomingStream', function(peerId, stream, isSelf) {
if(isSelf) return;

var vid = document.getElementById(peerId);

// Include ngxcarousel-inner in your selector
var tilecreation=document.querySelectorAll('#tilecreation .ngxcarousel-inner') <!--check-->

var createTiles = document.createElement("ngx-item")

createTiles.setAttribute("NgxCarouselItem", "");  // inserted the directive

tilecreation.appendChild(createTiles)
createTiles.id=vidID
var videoAttached = document.getElementById(vidID)
videoAttached.appendChild(vid)
AdapterJS.attachMediaStream(vid, stream);
});

try this

[harrychengly]

tilecreation.appendChild(createTiles) this error came out though

Property 'appendChild' does not exist on type 'NodeListOf Element '

[sheikalthaf]

tilecreation=document.querySelectorAll('#tilecreation .ngxcarousel-inner')[0]

mention array number to 0

[harrychengly]

That's really helpful!! but why are my videos still not separated by tiles? How do I separate them?

[sheikalthaf]

In angular you cannot append component. You have to insert it dynamically. https://angular.io/guide/dynamic-component-loader