<!-- JT Empfang template --> <style type='text/css'> .spotPreviewDefault { width: 1080px; height: 3840px; } @font-face { font-family: 'RobotoLight'; src: url('fonts/Roboto-Light.ttf'); } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto-Medium.ttf'); } @font-face { font-family: 'RobotoThin'; src: url('fonts/Roboto-Thin.ttf'); } {{divId}} .container { background-color: #fff; overflow:hidden; width: 100%; height: 100%; {{#equals border 'ja'}} margin: 33px; {{/equals}} } {{divId}} #videoPlayer { height: 100%; width: 100%; object-fit: cover; z-index: -100; right: 0; bottom: 0; overflow: hidden; } {{divId}} #logo { background-image: url(http://ds.jumptomorrow.tv/content/media/retailer/39/spot_image_591bff3f7e124.png); background-size: contain; background-position: 50% 50%; position: absolute; width: 200px; height: 200px; left: 100px; top: 100px; opacity: 0.7; } {{divId}} .news_container { position: absolute; left: 100px; right: 100px; width: 880px; top: 0px; color: white; font-size: 46px; } @-webkit-keyframes newsPosition { 0% {top: 1800px;} 100% {top: 500px;} } @-webkit-keyframes newsOpacity { 0% {opacity: 0.0} 10% {opacity: 0.6} 85% {opacity: 0.6} 100% {opacity: 0.0} } {{divId}} .news_title { position: relative; font-family: 'Roboto'; font-size: 46px; -webkit-animation: newsPosition 12.0s cubic-bezier(0.000, 0.705, 1.000, 0.485) 0.0s 1 normal forwards; } {{divId}} .news_title_o { opacity: 0.0; -webkit-animation: newsOpacity 11.2s ease 0.0s 1 normal forwards; } {{divId}} .news_container hr { opacity: 0.0; -webkit-animation: newsOpacity 11.6s ease 0.25s 1 normal forwards; } {{divId}} .news_line { position: relative; margin-bottom: 15px; -webkit-animation: newsPosition 12.0s cubic-bezier(0.000, 0.705, 1.000, 0.485) 0.25s 1 normal forwards; } {{divId}} .news_desc { position: relative; font-family: 'RobotoLight'; -webkit-animation: newsPosition 12.0s cubic-bezier(0.000, 0.705, 1.000, 0.485) 0.5s 1 normal forwards; } {{divId}} .news_desc_o { opacity: 0.0; -webkit-animation: newsOpacity 12.0s ease 0.5s 1 normal forwards; } {{divId}} #bottom_screen { position: absolute; top: 1920px; left: 100px; right: 100px; width: 880px; height: 1920px; opacity: 0.7; } {{divId}} .clock { position: absolute; opacity: 0.7; top: 100px; right: 100px; color: white; } {{divId}} .time { position: relative; font-family: 'RobotoThin'; font-size: 110px; margin-bottom: -2px; } {{divId}} .day { position: relative; font-family: 'RobotoLight'; font-size: 30px; text-align: right; margin-bottom: 2px; } {{divId}} .date { position: relative; font-family: 'RobotoLight'; font-size: 30px; text-align: right; } {{divId}} #weather_container { width: 880px; position: absolute; display: flex; top: 380px; left: 100px; right: 100px; justify-content: space-between; opacity: 0.7; } {{divId}} .weather_block { font-size: 30px; color: white; float: left; font-family: 'RobotoLight'; text-align: center; display: none; } {{divId}} .weather_block i { font-size: 80px; margin-bottom: 20px; opacity: 0.7; } {{divId}} .weather_block .weather_day { font-size: 30px; margin-bottom: 20px; } </style> <div class='container'> <video id='videoPlayer' crossOrigin='anonymous' loop> <source src='{{{video}}}' type='video/mp4'> </video> <div id='logo'></div> <div class='clock'> <div class='time'>15:35</div> <div class='day'>Monday</div> <div class='date'>15.05.2017</div> </div> <div id='weather_container'> </div> <div id='bottom_screen'> </div> </div> <script> Date.prototype.stdTimezoneOffset = function() { var jan = new Date(this.getFullYear(), 0, 1); var jul = new Date(this.getFullYear(), 6, 1); return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()); }; Date.prototype.dst = function() { return this.getTimezoneOffset() < this.stdTimezoneOffset(); }; /*Create unique namespace for template to avoid name collisions*/ var {{playerId}} = new function(){ var plays = 0; var news = []; var curNr = 0; var maxNews = 10; var that = this; this.loadFeed = function(callback){ curNr = 0; $.get('{{{feed}}}', function (data) { news = []; $(data).find('item').each(function () { var el = $(this); var text = that.strip(el.find('description').text()); var title = that.strip(el.find('title').text()); if(news.length < maxNews){ news.push({title: title, text: text}); } }); console.log(news); callback(); }); }; this.strip = function(html){ var tmp = document.createElement('DIV'); tmp.innerHTML = html; var text = tmp.textContent || tmp.innerText || ''; if(text.indexOf('"') == 0)text = text.substr(1); if(text.lastIndexOf('"') == text.length-1)text = text.substr(0, text.length-1); return text.trim(); }; this.showNews = function(){ /*console.log(curNr);*/ $('{{divId}} .news_container').remove(); if(news[curNr]){ var container = $('<div></div>'); container.addClass('news_container'); var newsTitle = $('<div></div>'); newsTitle.addClass('news_title'); var newsTitleO = $('<div></div>'); newsTitleO.addClass('news_title_o'); newsTitleO.text(news[curNr].title); newsTitle.append(newsTitleO); var newsDesc = $('<div></div>'); newsDesc.addClass('news_desc'); var newsDescO = $('<div></div>'); newsDescO.addClass('news_desc_o'); newsDescO.text(news[curNr].text); newsDesc.append(newsDescO); var hr = $('<div></div>'); hr.addClass('news_line'); hr.append($('<hr>')); container.append(newsTitle); container.append(hr); container.append(newsDesc); $('{{divId}} .container').first().append(container); } var currPlay = plays; setTimeout(function(){ if(currPlay == plays){ curNr += 1; if(curNr < news.length){ that.showNews(); }else{ that.loadFeed(function(){ that.showNews(); }); } } }, 12000); }; this.addAnimation = function(el, elOp, delay, duration){ setTimeout(function(){ elOp.removeClass('fadeOut'); elOp.addClass('fadeIn'); el.removeClass('startPos'); el.addClass('endPos'); setTimeout(function(){ elOp.removeClass('fadeIn'); elOp.addClass('fadeOut'); }, duration-1000-200); setTimeout(function(){ el.removeClass('endPos'); el.addClass('startPos'); }, duration-200); }, delay); }; this.updateClock = function(){ var d = new Date(); var dayNames = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ]; var monthNames = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; var hour = d.getUTCHours(); if(d.dst()){ hour = hour+2; }else{ hour = hour+1; } hour = hour % 24; if(hour < 10)hour = '0'+hour; var minutes = d.getUTCMinutes(); if(minutes < 10)minutes = '0'+minutes; var day = d.getDay(); day = dayNames[day]; var date = d.getDate(); if(date < 10)date = '0'+date; var month = d.getMonth() + 1; if(month < 10)month = '0'+month; var year = d.getFullYear(); $('{{divId}} .time').first().text(hour+':'+minutes); $('{{divId}} .day').first().text(day); $('{{divId}} .date').first().text(date+'.'+month+'.'+year); setTimeout(function(){that.updateClock();}, 1000); }; var weatherList = []; this.getCurrentWeatherData = function(){ console.log('update weather data'); weatherList = []; $.getJSON('http://api.openweathermap.org/data/2.5/weather?id=2761369&APPID=9fee1a4ba0b9c35b37232bb9c6ea297b', function(data){ var icon = data.weather[0].icon; var temp = Math.round(data.main.temp - 273.15); weatherList.push({icon: icon, temp: temp, time: null}); that.getForcast(); }); }; this.getForcast = function(){ $.getJSON('http://api.openweathermap.org/data/2.5/forecast?id=2761369&APPID=9fee1a4ba0b9c35b37232bb9c6ea297b', function(data){ var limit = 5; for(var i=0; i<limit; i++){ var icon = data.list[i].weather[0].icon; var temp = Math.round(data.list[i].main.temp - 273.15); var time = data.list[i].dt_txt; var date = new Date(time); time = time.substr(11, 5); if(date < new Date()){ limit++; }else{ weatherList.push({icon: icon, temp: temp, time: time}); } } that.createWeatherDisplay(); }); }; this.createWeatherDisplay = function(){ $('{{divId}} .weather_block').remove(); weatherList.forEach(function(data){ var timeVal = data.time == null ? 'Now' : data.time; var div = $('<div></div>'); div.addClass('weather_block'); var time = $('<div></div>'); time.addClass('weather_day'); time.text(timeVal); div.append(time); switch(data.icon){ case '01d': div.append('<i class="wi wi-day-sunny"></i>');break; case '02d': div.append('<i class="wi wi-day-cloudy"></i>');break; case '03d': case '03n': div.append('<i class="wi wi-cloud"></i>');break; case '04d': case '04n': div.append('<i class="wi wi-cloudy"></i>');break; case '09d': case '09n': div.append('<i class="wi wi-rain"></i>');break; case '10d': div.append('<i class="wi wi-day-rain"></i>');break; case '11d': case '11n': div.append('<i class="wi wi-thunderstorm"></i>');break; case '13d': case '13n': div.append('<i class="wi wi-snow-wind"></i>');break; case '50d': case '50n': div.append('<i class="wi wi-fog"></i>');break; case '01n': div.append('<i class="wi wi-night-clear"></i>');break; case '02n': div.append('<i class="wi wi-night-alt-cloudy"></i>');break; case '10n': div.append('<i class="wi wi-night-alt-rain"></i>');break; } var temp = $('<div></div>'); temp.addClass('temp'); temp.text(data.temp+'°C'); div.append(temp); $('{{divId}} #weather_container').append(div); div.fadeIn(2000); }); setTimeout(function(){that.getCurrentWeatherData();}, 900000); }; this.templateOnPlay = function(player){ plays++; if(plays > 1){ that.showNews(); } }; }; function templateInitFunc{{playerId}}(){ {{playerId}}.loadFeed(function(){ {{playerId}}.showNews(); }); {{playerId}}.updateClock(); {{playerId}}.getCurrentWeatherData(); }; </script>