move emby-webcomponents to components and reflect paths

src/components/guide/guide-settings.js

@@ -0,0 +1,172 @@
+define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
+    'use strict';
+
+    function saveCategories(context, options) {
+
+        var categories = [];
+
+        var chkCategorys = context.querySelectorAll('.chkCategory');
+        for (var i = 0, length = chkCategorys.length; i < length; i++) {
+
+            var type = chkCategorys[i].getAttribute('data-type');
+
+            if (chkCategorys[i].checked) {
+                categories.push(type);
+            }
+        }
+
+        if (categories.length >= 4) {
+            categories.push('series');
+        }
+
+        // differentiate between none and all
+        categories.push('all');
+        options.categories = categories;
+    }
+
+    function loadCategories(context, options) {
+
+        var selectedCategories = options.categories || [];
+
+        var chkCategorys = context.querySelectorAll('.chkCategory');
+        for (var i = 0, length = chkCategorys.length; i < length; i++) {
+
+            var type = chkCategorys[i].getAttribute('data-type');
+
+            chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
+        }
+    }
+
+    function save(context) {
+
+        var i, length;
+
+        var chkIndicators = context.querySelectorAll('.chkIndicator');
+        for (i = 0, length = chkIndicators.length; i < length; i++) {
+
+            var type = chkIndicators[i].getAttribute('data-type');
+            userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
+        }
+
+        userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
+        userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
+
+        var sortBys = context.querySelectorAll('.chkSortOrder');
+        for (i = 0, length = sortBys.length; i < length; i++) {
+            if (sortBys[i].checked) {
+                userSettings.set('livetv-channelorder', sortBys[i].value);
+                break;
+            }
+        }
+    }
+
+    function load(context) {
+
+        var i, length;
+
+        var chkIndicators = context.querySelectorAll('.chkIndicator');
+        for (i = 0, length = chkIndicators.length; i < length; i++) {
+
+            var type = chkIndicators[i].getAttribute('data-type');
+
+            if (chkIndicators[i].getAttribute('data-default') === 'true') {
+                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) !== 'false';
+            } else {
+                chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) === 'true';
+            }
+        }
+
+        context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
+        context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
+
+        var sortByValue = userSettings.get('livetv-channelorder') || 'Number';
+
+        var sortBys = context.querySelectorAll('.chkSortOrder');
+        for (i = 0, length = sortBys.length; i < length; i++) {
+            sortBys[i].checked = sortBys[i].value === sortByValue;
+        }
+    }
+
+    function onSortByChange() {
+        var newValue = this.value;
+        if (this.checked) {
+            var changed = options.query.SortBy !== newValue;
+
+            options.query.SortBy = newValue.replace('_', ',');
+            options.query.StartIndex = 0;
+
+            if (options.callback && changed) {
+                options.callback();
+            }
+        }
+    }
+
+    function showEditor(options) {
+
+        return new Promise(function (resolve, reject) {
+
+            var settingsChanged = false;
+
+            require(['text!./guide-settings.template.html'], function (template) {
+
+                var dialogOptions = {
+                    removeOnClose: true,
+                    scrollY: false
+                };
+
+                if (layoutManager.tv) {
+                    dialogOptions.size = 'fullscreen';
+                } else {
+                    dialogOptions.size = 'small';
+                }
+
+                var dlg = dialogHelper.createDialog(dialogOptions);
+
+                dlg.classList.add('formDialog');
+
+                var html = '';
+
+                html += globalize.translateDocument(template, 'core');
+
+                dlg.innerHTML = html;
+
+                dlg.addEventListener('change', function () {
+
+                    settingsChanged = true;
+                });
+
+                dlg.addEventListener('close', function () {
+
+                    if (layoutManager.tv) {
+                        scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
+                    }
+
+                    save(dlg);
+                    saveCategories(dlg, options);
+
+                    if (settingsChanged) {
+                        resolve();
+                    } else {
+                        reject();
+                    }
+                });
+
+                dlg.querySelector('.btnCancel').addEventListener('click', function () {
+                    dialogHelper.close(dlg);
+                });
+
+                if (layoutManager.tv) {
+                    scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+                }
+
+                load(dlg);
+                loadCategories(dlg, options);
+                dialogHelper.open(dlg);
+            });
+        });
+    }
+
+    return {
+        show: showEditor
+    };
+});

src/components/guide/guide-settings.template.html

@@ -0,0 +1,68 @@
+<div class="formDialogHeader">
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <h3 class="formDialogHeaderTitle">
+        ${Settings}
+    </h3>
+</div>
+<div class="formDialogContent smoothScrollY">
+    <form class="dialogContentInner dialog-content-centered" style="padding-top:2em;">
+
+        <h3 class="checkboxListLabel">${SortChannelsBy}</h3>
+        <label class="radio-label-block"><input type="radio" is="emby-radio" name="ChannelSortOrder" value="Number" class="chkSortOrder" /><span>${ChannelNumber}</span></label>
+        <label class="radio-label-block"><input type="radio" is="emby-radio" name="ChannelSortOrder" value="DatePlayed" class="chkSortOrder" /><span>${RecentlyWatched}</span></label>
+        <br />
+        <label class="checkboxContainer">
+            <input type="checkbox" is="emby-checkbox" class="chkFavoriteChannelsAtTop" />
+            <span>${PlaceFavoriteChannelsAtBeginning}</span>
+        </label>
+        <h3 class="checkboxListLabel">${ShowIndicatorsFor}</h3>
+        <div class="checkboxList">
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="hd" />
+                <span>${HDPrograms}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="live" data-default="true" />
+                <span>${LiveBroadcasts}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="new" />
+                <span>${NewEpisodes}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="premiere" data-default="true" />
+                <span>${Premieres}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkIndicator" data-type="repeat" />
+                <span>${RepeatEpisodes}</span>
+            </label>
+        </div>
+        <br />
+        <label class="checkboxContainer">
+            <input type="checkbox" is="emby-checkbox" class="chkColorCodedBackgrounds"/>
+            <span>${EnableColorCodedBackgrounds}</span>
+        </label>
+
+        <h3 class="checkboxListLabel">${Categories}</h3>
+       <div class="checkboxList">
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="movies" />
+                <span>${Movies}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="sports" />
+                <span>${Sports}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="kids" />
+                <span>${Kids}</span>
+            </label>
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkCategory" data-type="news" />
+                <span>${News}</span>
+            </label>
+        </div>
+
+    </form>
+</div>

src/components/guide/guide.css

@@ -0,0 +1,430 @@
+.tvguide {
+    display: flex;
+    flex-direction: column;
+    align-items: initial;
+}
+
+.tvGuideHeader {
+    white-space: nowrap;
+    width: 100%;
+    flex-direction: column;
+    flex-shrink: 0;
+    display: flex;
+    contain: layout style paint;
+}
+
+.layout-desktop .tvGuideHeader {
+    margin-bottom: .5em;
+}
+
+.guideHeaderDateSelection {
+    font-size: 86%;
+    padding: .4em 0;
+}
+
+.guide-headerTimeslots {
+    display: flex;
+}
+
+.tvProgramSectionHeader {
+    margin: 0;
+}
+
+.tvProgram {
+    display: block;
+    text-decoration: none;
+    white-space: nowrap;
+    position: relative;
+}
+
+.guideProgramIndicator {
+    text-transform: uppercase;
+    border-radius: .25em;
+    margin-right: .5em;
+    font-size: 82%;
+    padding: .2em .25em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-left: 1em;
+}
+
+.guide-channelTimeslotHeader {
+    flex-shrink: 0;
+    justify-content: center;
+}
+
+.timeslotHeaders {
+    white-space: nowrap;
+    font-weight: 500;
+    font-size: 120%;
+}
+
+.programContainer {
+    white-space: nowrap;
+    position: relative;
+    align-items: flex-start;
+    contain: strict;
+}
+
+.channelPrograms {
+    white-space: nowrap;
+    position: relative;
+    contain: strict;
+    box-sizing: border-box;
+}
+
+.timeslotHeadersInner {
+    position: relative;
+}
+
+.guideSpacer {
+    width: .3em;
+    flex-shrink: 0;
+}
+
+.channelPrograms, .timeslotHeadersInner {
+    width: 1800vw;
+}
+
+@media all and (min-width: 37.5em) {
+
+    .channelPrograms, .timeslotHeadersInner {
+        width: 1400vw;
+    }
+}
+
+@media all and (min-width: 50em) {
+
+    .channelPrograms, .timeslotHeadersInner {
+        width: 1200vw;
+    }
+}
+
+@media all and (min-width: 80em) {
+
+    .channelPrograms, .timeslotHeadersInner {
+        width: 810vw;
+    }
+}
+
+.timeslotHeader {
+    display: inline-flex;
+    align-items: center;
+    text-indent: .25em;
+    width: 2.0833333333333333333333333333333%;
+}
+
+.guide-channelHeaderCell, .guide-channelTimeslotHeader {
+    padding: 0 !important;
+    cursor: pointer;
+    outline: none !important;
+    width: 100%;
+    vertical-align: middle;
+    font-family: inherit;
+    font-size: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 1px 0 0;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    /* Needed in firefox */
+    text-align: left;
+    contain: strict;
+    flex-shrink: 0;
+    border-radius: .12em;
+    color: inherit;
+}
+
+.guide-channelHeaderCell {
+    border-width: 1px 1px 1px 0;
+    border-style: solid;
+    width: 100%;
+    height: 4.42em;
+    contain: strict;
+    position: relative;
+    background: transparent;
+}
+
+.guide-channelTimeslotHeader {
+    border: 0 !important;
+}
+
+/* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell
+   This was causing channelsContainer to extend beyond the fixed width on ps4, tizen, lg and opera tv.
+*/
+.channelsContainer, .guide-channelTimeslotHeader {
+    width: 24vw;
+}
+
+@media all and (min-width:31.25em) {
+    .channelsContainer, .guide-channelTimeslotHeader {
+        width: 16vw;
+    }
+}
+
+@media all and (min-width:37.5em) {
+    .channelsContainer, .guide-channelTimeslotHeader {
+        width: 16vw;
+    }
+}
+
+@media all and (min-width:50em) {
+    .channelsContainer, .guide-channelTimeslotHeader {
+        width: 14vw;
+    }
+}
+
+@media all and (min-width:80em) {
+    .channelsContainer, .guide-channelTimeslotHeader {
+        width: 12vw;
+    }
+}
+
+.btnGuideViewSettings {
+    margin: 0;
+    flex-shrink: 0;
+}
+
+.btnGuideViewSettingsIcon {
+    font-size: 1.5em !important;
+}
+
+.selectDateIcon {
+    flex-shrink: 0;
+}
+
+@media all and (max-width: 50em) {
+
+    .newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon {
+        display: none;
+    }
+}
+
+.channelPrograms {
+    height: 4.42em;
+    contain: strict;
+    display: flex;
+    flex-direction: column;
+    border-style: solid;
+    border-width: 1px 0 1px 0;
+}
+
+    .channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell {
+        margin-top: -1px;
+    }
+
+.channelPrograms-tv, .guide-channelHeaderCell-tv {
+    height: 3em;
+}
+
+.guide-channelTimeslotHeader {
+    border-right-color: transparent;
+}
+
+.guide-channelTimeslotHeader, .timeslotHeader {
+    background: transparent !important;
+    height: 2.8em;
+}
+
+.programGrid {
+    padding-bottom: 4px;
+    flex-grow: 1;
+}
+
+.programCell {
+    color: inherit;
+    background: transparent;
+    border-style: solid;
+    border-width: 0 0 0 1px;
+    padding: 0 !important;
+    cursor: pointer;
+    outline: none !important;
+    width: 100%;
+    vertical-align: middle;
+    font-family: inherit;
+    font-size: inherit;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    text-decoration: none;
+    overflow: hidden;
+    align-items: center;
+    /* Needed for Firefox */
+    text-align: left;
+    contain: strict;
+    flex-grow: 1;
+    margin: 0 !important;
+}
+
+.guideProgramName {
+    padding: 0 .7em 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-items: center;
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+    contain: layout style paint;
+    /*transition: transform 60ms ease-out;*/
+}
+
+.guide-programNameCaret {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 200%;
+}
+
+.guideProgramNameText {
+    margin: 0;
+    font-weight: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.guideProgramSecondaryInfo {
+    display: flex;
+    align-items: center;
+    margin-top: .1em;
+}
+
+.programIcon {
+    margin-left: .5em;
+    height: 1em;
+    width: 1em;
+    font-size: 1.6em;
+    color: #ddd;
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
+.guide-programTextIcon {
+    font-weight: bold;
+    font-size: .9em;
+    padding: .16em .3em;
+    border-radius: .25em;
+    margin-right: .35em;
+    width: auto;
+    height: auto;
+}
+
+.guide-programTextIcon-tv {
+    font-size: .74em;
+}
+
+.guideChannelNumber {
+    padding-left: 1em;
+    max-width: 30%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-weight: normal;
+    margin: 0;
+}
+
+.guideChannelName {
+    margin-left: auto;
+    margin-right: 1em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 70%;
+}
+
+.guideChannelImage {
+    position: absolute;
+    right: 8%;
+    top: 15%;
+    bottom: 15%;
+    width: 40%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: right center;
+}
+
+@media all and (min-width: 62.5em) {
+
+    .guideChannelName {
+        max-width: 40%;
+    }
+}
+
+@media all and (max-width: 62.5em) {
+
+    .guideChannelNumber {
+        display: none;
+    }
+
+    .guideChannelImage {
+        width: 70%;
+    }
+}
+
+.channelsContainer {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+}
+
+.channelsContainer, .programGrid {
+    contain: layout style paint;
+}
+
+.programCell, .guide-channelHeaderCell {
+    outline: none !important;
+}
+
+.timerIcon, .seriesTimerIcon {
+    color: #cc3333 !important;
+}
+
+.seriesTimerIcon-inactive {
+    color: inherit !important;
+    opacity: .7;
+}
+
+.guideOptions {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+}
+
+@media all and (max-width: 50em), all and (max-height: 37.5em) {
+
+    .tvGuideHeader {
+        padding-left: 0;
+    }
+}
+
+.guideRequiresUnlock {
+    margin: 1em auto;
+    text-align: center;
+    padding: 1em;
+    flex-shrink: 0;
+}
+
+.noRubberBanding {
+    /* This is needed to combat the rubber banding in iOS */
+    padding-bottom: 7em;
+}
+
+.guideDateTabsSlider {
+    text-align: center;
+}
+
+.guide-date-tab-button {
+    padding: .3em .7em !important;
+    margin: 0 .3em !important;
+    font-weight: normal;
+}
+
+    .guide-date-tab-button.emby-tab-button-active {
+        border-color: transparent !important;
+    }
+
+    .guide-date-tab-button.emby-button-tv:focus {
+        border-radius: .15em !important;
+        transform: none !important;
+    }

src/components/guide/programs.css

@@ -0,0 +1,19 @@
+.newTvProgram {
+    background: #3388cc;
+    color: #fff;
+}
+
+.liveTvProgram {
+    background: #cc3333;
+    color: #fff;
+}
+
+.premiereTvProgram {
+    background: #EF6C00;
+    color: #fff;
+}
+
+.repeatTvProgram {
+    background: #009688;
+    color: #fff;
+}

src/components/guide/tvguide.template.html

@@ -0,0 +1,39 @@
+<div class="tvGuideHeader">
+
+    <div class="guideHeaderDateSelection">
+        <div is="emby-tabs" class="guideDateTabs focuscontainer-x" data-selectionbar="false">
+            <div class="emby-tabs-slider guideDateTabsSlider">
+            </div>
+        </div>
+    </div>
+
+    <div class="guide-headerTimeslots">
+        <div class="guide-channelTimeslotHeader">
+            <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
+                <i class="md-icon btnGuideViewSettingsIcon">&#xE5D3;</i>
+            </button>
+        </div>
+        <div class="timeslotHeaders scrollX guideScroller"></div>
+    </div>
+</div>
+
+<div is="emby-scroller" class="guideVerticalScroller flex flex-grow programContainer guideScroller" data-skipfocuswhenvisible="true" data-horizontal="false">
+
+    <div class="scrollSlider flex flex-grow flex-direction-row" style="overflow:hidden;contain: layout style paint;">
+        <div class="channelsContainer">
+            <div class="channelList"></div>
+        </div>
+
+        <div class="programGrid scrollX guideScroller flex-grow focuscontainer-right" style="white-space: nowrap;">
+        </div>
+    </div>
+</div>
+
+<div class="guideOptions hide">
+    <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
+        <i class="md-icon">&#xE5C4;</i>
+    </button>
+    <button is="paper-icon-button-light" type="button" class="btnNextPage">
+        <i class="md-icon">&#xE5C8;</i>
+    </button>
+</div>