MMM-newsfeedtouch - News so hot you wanna touch it

number1dan

@broberg Hi, great module it works well for me. however… After seeing this I though OH MAYBE I WANT A VIDEO TO PLAY WHEN I CLICK ON SOMETHING, so i tried to make a module for it and then it just wouldn’t work. So i sort of fiddled with this one to have 1 hardcoded “headline” which when clicked on, opened an iframe element and played the latest video from a youtube playlist as shown below.

//codechange
                        var title = document.createElement("div");
                        title.className = "bright small regular fed";


                        title.innerHTML = "Zero Punctuation Review";
                        title.addEventListener("click", () => showdesc(this)); //Show description on click
                        wrapper.appendChild(title);


                        //below is the function to show description and hide title
                        function showdesc(thisdesc) {
                                thisdesc.intpause();    //clear interval
                                title.style.display="none";
/*                              var readTimer = setTimeout(function() {hidedesc(thisdesc)}, thisdesc.config.readInterval); //sets timeout for the description
                                description = document.createElement("div");
                                description.className = "infoCenter";
                                description.innerHTML = thisdesc.newsItems[thisdesc.activeItem].description;
                                description.addEventListener("click", () => hidedesc(thisdesc));  //Hide description on click
                                description.addEventListener("click", () => clearTimeout(readTimer)); //Stop timer when clicked so the next title doesn't reload again.
*/

                                description = document.createElement ("iframe");
                                description.className = "vid";
                                description.src = 'https://www.youtube.com/embed/htm+lastest?list=PLAbMhAYRuCUhawCEV2oXZGrienoKTN16X&autoplay=1';
                                description.autoplay = true;
                                description.addEventListener("click", () => hidedesc(thisdesc));  //Hide description on click
                                description.addEventListener("click", () => clearTimeout(readTimer)); //Stop timer when clicked so the next title doesn't reload again.

//                              wr.appendChild(video);







                                wrapper.appendChild(description);


                        };

                        //and to close the description on click and get next title
                        function hidedesc(thisdesc) {
                                thisdesc.activeItem++;
                                thisdesc.intresume();   //resume the interval
                                description.style.display="none";
                        };

//codechange end

Just a Suggestion in case you wanted in the future to incorporate playing the news release video as an option for your module. Sorry for playing with it!

emlowe

This module only seems to work properly when used in top_bar or bottom_bar - or something that spans the entire “middle” of the screen.

The description doesn’t work properly when used in top_right or bottom_right, although the rest of the module does work - the description doesn’t work.

It’s possible there is some magic css that would make it work properly.

I’m trying it on a 7" touchscreen, so real estate is limited

-Earle

broberg

@emlowe yes, position and size is done with css and do need adjusting when used on smaller layouts. Look at the css code in the module for the class names and copy it to you custom.css and then play around with position and size.

emlowe

Just to followup on my CSS, the following should center the content pretty well on most setups - I can’t figure out why I have to manually set the height though, but if I don’t the border doesn’t draw around all the text.

This creates something like a “pop-up” in the middle of your screen for the content, which works pretty well for me.

.infoCenter {  
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%); // This centers the box
  width: 80vw; // set the width to about 80% of the screen
  height: 20vw; // set the height to about 20% of the screen
}

wireshark

This post is deleted!