set assignComments on media queries

[matthewbub]

Causing unpredictability when we randomize the comments throughout the grid.

It works proper ✅

• [x] On Page Refresh
• [x] Upon hitting Media Queries
• [x] Ensure correct heights are being set and applied to < 960 queries specifically in JavaScript

It breaks ❌

Also needing attention 🤔

---

I think we can call the assignComments method https://github.com/hi-matbub/video-player-manipulation/blob/0bea2188abe38b76bfba64e152b4fdffdfdbb324/src/components/MediaPlayer/Comments.vue#L38-L42 in the onResize method: https://github.com/hi-matbub/video-player-manipulation/blob/0bea2188abe38b76bfba64e152b4fdffdfdbb324/src/App.vue#L70-L75

I believe that will resolve this issue 👍

Mobile responsive could use a bit of attention, was prioritizing the interactive desktop queries. Here is a video demonstrating the bugs.

https://user-images.githubusercontent.com/53072963/110075010-f8c07300-7d36-11eb-927d-929d57e112e2.mov

[matthewbub]

Exploring the original issue a bit further..

I've tried to call the assignComments method from within the onResize method and the result worked, but was glitchy on screen resizes thus not a possible solution, but on the right track!

this.$refs.mediaPlayer.$refs.comments.assignComments({
  dropzone: document.querySelectorAll('.dropzone'),
  comments: document.querySelectorAll('.comment-li'),
  width: window.innerWidth
})

I think the ticket here is to invoke this assignComments method once, perhaps from within the MediaPlayer Component where we render <Comments /> which contains the assignComments method.

I know that the MediaPlayer component already has access to the dynamic response we get from onResize method. I'm thinking something along the lines of this might do the trick:

<Comments
    @resize.once="width >= 960 ? 
         this.$refs.comments.assignComments({
             dropzone: document.querySelectorAll('.dropzone'),
             comments: document.querySelectorAll('.comment-li'),
             width: window.innerWidth
        }) 
        :  this.$refs.comments.assignComments({
             dropzone: document.querySelectorAll('.dropzone'),
             comments: document.querySelectorAll('.comment-li'),
             width: window.innerWidth
        }) " 
/>

I am not sure the resize event exists by default, will have to explore dynamic events or v-if methods

[matthewbub]

Looks like things still get displayed in random positions on the page break from big to smaller screen sizes. Probably need to resort the comments.