"samsung_featured_app.ts",
"samsung_featured_header.js",
"samsung_opentabs_app.js",
+ "samsung_watchlater_app.ts",
]
non_web_component_files = [
"samsung_data_service.ts",
{
let featuredPageComponent = document.getElementsByTagName('SAMSUNG-FEATURED-APP');
let opentabsPageComponent = document.getElementsByTagName('SAMSUNG-OPENTABS-APP');
+ let watchLaterPageComponent = document.getElementsByTagName('SAMSUNG-WATCHLATER-APP');
if(loc == "featured" || loc == "")
{
featuredPageComponent[0].style.display = '';
+ watchLaterPageComponent[0].style.display = 'none';
opentabsPageComponent[0].style.display = 'none';
setSelectedTabs('buttonQuick');
}
else if(loc == "openedTabs")
{
featuredPageComponent[0].style.display = 'none';
+ watchLaterPageComponent[0].style.display = 'none';
opentabsPageComponent[0].style.display = '';
setSelectedTabs('buttonOpenedTabs');
}
+ else if(loc == "watchlater"){
+ featuredPageComponent[0].style.display = 'none';
+ opentabsPageComponent[0].style.display = 'none';
+ watchLaterPageComponent[0].style.display = '';
+ setSelectedTabs('buttonWatchLater');
+ }
}
<samsung-featured-header > </samsung-featured-header>
<samsung-featured-app style ="display :none;"></samsung-featured-app>
<samsung-opentabs-app style="display: none;"></samsung-opentabs-app>
+ <samsung-watchlater-app style="display: none;"></samsung-watchlater-app>
</body>
<style>
body.highContrast {
<script type="module" src="samsung_featured_header.js"></script>
<script type="module" src="samsung_featured_app.js"></script>
<script type="module" src="samsung_opentabs_app.js"></script>
+ <script type="module" src="samsung_watchlater_app.js"></script>
</html>
\ No newline at end of file
import './samsung_featured_app.js';
import './samsung_featured_header.js';
+import './samsung_watchlater_app.js';
export {SamsungFeaturedAppElement} from './samsung_featured_app.js';
-export {SamsungFeaturedHeader } from './samsung_featured_header.js'
\ No newline at end of file
+export {SamsungFeaturedHeader } from './samsung_featured_header.js';
+export{SamsungWatchLaterAppElement} from './samsung_watchlater_app.js';
\ No newline at end of file
border-image: url(chrome://resources/images/samsung/high_contrast/thumbnail_focus_9patch.png) 7 7 7 7 repeat !important;
}
</style>
-<div id="vc_tooltip_area" style="display: block;">
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
- <span id="vc_tooltip" class="vc_number_tag_normal" style="visibility: hidden;"></span>
-</div>
<div id="container" class="mostvisited">
<div class="antiScrollWrapper">
<div id = 'thumbnailGrid' class = 'thumbnailGrid'>
<div id = 'buttonBookmarks' class = 'button' role="button" on-click="onBookmarkClick_">
<div class = 'marquee buttonCaption' aria-hidden="true">Bookmarks</div>
</div>
- <div class = 'tabSeperator'></div>
+ <div class = 'tabSeperator'></div> -->
<div id = 'buttonWatchLater' class = 'button' role="button" on-click="onWatchlaterClick_">
<div class = 'captionWatchLater'>
<div class = 'marquee buttonCaption' aria-hidden="true" >Watch later</div>
<div id='countWatchLater' class='buttonCaption' aria-hidden="true"> </div>
</div>
</div>
- <div class = 'tabSeperator'></div> -->
+ <div class = 'tabSeperator'></div>
<div id = 'buttonOpenedTabs' class = 'button' role="button" on-click="onOpentabsClick_">
<div class = 'marquee buttonCaption' aria-hidden="true">Open Tabs</div>
</div>
}
#buttonWrapper.headerList .button {
- width: calc(50% - 2px);
+ width: calc(30% - 2px);
}
#buttonWrapper .button.deselected:hover {
return '';
}
}
+
+export function getWatchLaterData(){
+ return [
+ {
+ "device_id" : '1',
+ "url": "https://www.google.com",
+ "title": "Google",
+ "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.google.com"
+ },
+ {
+ "device_id" : '2',
+ "url": "https://www.facebook.com",
+ "title": "Facebook",
+ "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.facebook.com"
+ },
+ {
+ "device_id" : '3',
+ "url": "https://www.yahoo.com",
+ "title": "Yahoo",
+ "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.yahoo.com"
+ },
+ {
+ "device_id" : '4',
+ "url": "https://www.youtube.com",
+ "title": "Youtube",
+ "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.youtube.com"
+ },
+ {
+ "device_id" : '5',
+ "url": "https://www.vimeo.com",
+ "title": "Vimeo",
+ "favicon_data": "http://www.google.com/s2/favicons?domain=https://vimeo.com"
+ },
+ {
+ "device_id" : '6',
+ "url": "https://www.amazon.com",
+ "title": "Amazon",
+ "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.amazon.com"
+ },
+ {
+ "device_id" : '7',
+ "url": "https://www.msn.com",
+ "title": "MSN",
+ "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.msn.com"
+ },
+ {
+ "device_id" : '8',
+ "url": "https://edition.cnn.com/",
+ "title": "CNN",
+ "favicon_data": "hhttp://www.google.com/s2/favicons?domain=https://www.msnbc.com"
+ },
+ {
+ "device_id" : '9',
+ "url": "https://www.imdb.com/",
+ "title": "IMDB",
+ "favicon_data": "http://www.google.com/s2/favicons?domain=https://www.imdb.com"
+ }
+]
+}
--- /dev/null
+<style include="samsung-common samsung-opentabs-bookmarks shared-style cr-shared-style">
+
+ dialog [slot=body] {
+ white-space: pre-wrap;
+ }
+ .mostvisited.highContrast .button:hover {
+ background-image: url(chrome://resources/images/samsung/high_contrast/button_1_f.png) !important;
+ }
+ .mostvisited.highContrast .bookmarkGridItem:hover {
+ background-image: url(chrome://resources/images/samsung/high_contrast/bookmark_bg_f.png) !important;
+ }
+ img {
+ overflow: hidden !important;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ </style>
+ <div id="container" class="thumbnailGridWatchLater">
+ <div class="antiScrollWrapper">
+ <div id="watchingButtons" class="bookmarksButtons">
+ <div id="buttonRemoveAll" aria-label="button" class="button">
+ <div></div>
+ <div id="buttonRemoveAllText" on-click = "onRemovewatchingWatchLaterClicked_" class="marquee buttonCaption">Remove All</div>
+ </div>
+ </div>
+ <div id="watchingWatchLater">
+ You Haven't watched this yet
+ </div>
+ <div id = 'thumbnailGrid' class = 'thumbnailGridBookmarks'>
+ <template is="dom-repeat" items="[[thumbnailOptions]]">
+ <div class="bookmarkGridItem">
+ <div class="bookmarkItemThumbnail {isApp} marquee_img">
+ <a class="bookmarkThumbnailLink" href="[[item.url]]" aria-label="[[item.title]]" id="[[item.element_id]]" type="{bookmarkType}" target="_blank" on-click = "onClicked_">
+ <div class="bookmarkItemFavicon {bookmarkType}">
+ <img src = "[[item.favicon]]" alt = " " on-error = "onErroInImageLoad_">
+ </div>
+ <div class="marquee bookmarkItemName description" aria-label="[[item.title]] {descriptionSuffix} {bookmarkAccountType}">
+ [[item.title]]
+ </div>
+ <a>
+ <div class="closeButton" id= "[[item.element_id]]" on-click = "onDeleteClicked_" aria-label="{removeDescAria} ' + lang.TV_SID_BUTTON + '" >
+ <div class="tooltipArrow"></div>
+ <div class="tooltipWrapper">
+ <div class="content description">
+ Remove
+ </div>
+ </div>
+ </div>
+ </a>
+ <a>
+ <div class="{interactClass}" aria-label=" ">
+ <div class="tooltipArrow"></div>
+ <div class="tooltipWrapper">
+ <div class="content description">
+ <!-- {interactDescription} -->
+ </div>
+ </div>
+ </div>
+ </a>
+ <div class="itemCover"></div>
+ </a>
+ </div>
+ </div>
+ </template>
+ </div>
+ <div id="divisionLine" style="margin-bottom: 20x;"></div>
+ <div id="watchedButtons" class="bookmarksButtons">
+ <div id="buttonRemoveWatchedAll" class="button light" aria-disabled="false" aria-label="button" style="pointer-events: auto; display: block;">
+ <div></div>
+ <div id="buttonRemoveWatchedAllText" on-click = "onRemoveWatchedAllClicked_" class="marquee buttonCaption">Remove All</div>
+ </div>
+ </div>
+ <div id="watchedWatchLater">
+ You Have watched this
+ </div>
+ <div id = 'thumbnailGrid' class = 'thumbnailGridBookmarks'>
+ <template is="dom-repeat" items="[[thumbnailOptions2]]">
+ <div class="bookmarkGridItem">
+ <div class="bookmarkItemThumbnail {isApp} marquee_img">
+ <a class="bookmarkThumbnailLink" href="[[item.url]]" aria-label="[[item.title]]" type="{bookmarkType}" target="_blank" on-click = "onClicked_">
+ <div class="bookmarkItemFavicon {bookmarkType}">
+ <img style="background-image: [[item.favicon]]"></img>
+ </div>
+ <div class="marquee bookmarkItemName description" aria-label="[[item.title]] {descriptionSuffix} {bookmarkAccountType}">
+ [[item.title]]
+ </div>
+ <a>
+ <div class="closeButton" aria-label="{removeDescAria} ' + lang.TV_SID_BUTTON + '" >
+ <div class="tooltipArrow"></div>
+ <div class="tooltipWrapper">
+ <div class="content description">
+ Remove
+ </div>
+ </div>
+ </div>
+ </a>
+ <a>
+ <div class="{interactClass}" aria-label="{interactDescriptionAria} ' + lang.TV_SID_BUTTON + '">
+ <div class="tooltipArrow"></div>
+ <div class="tooltipWrapper">
+ <div class="content description">
+ <!-- {interactDescription} -->
+ </div>
+ </div>
+ </div>
+ </a>
+ <div class="itemCover"></div>
+ </a>
+ </div>
+ </div>
+ </template>
+ </div>
+ <div id = 'accountGrid' class = 'accountGrid'></div>
+ </div>
+ </div>
\ No newline at end of file
--- /dev/null
+import './samsung_common.css.js';\r
+import './samsung_featured_quick.css.js';\r
+\r
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';\r
+import {getTemplate} from './samsung_watchlater_app.html.js';\r
+\r
+import { SamsungDataServiceImpl } from './samsung_data_service.js';\r
+import {UrlType, ThumbnailItem, getWatchLaterData, ThumbnailOption,CleanUrl, GetStaticQuick, GridController} from './samsung_utils.js';\r
+import { HybridNavigation } from 'chrome://resources/js/samsung/hybridnavigation.js';\r
+import {addWebUiListener} from 'chrome://resources/js/cr.js';\r
+const timeForPageToLoad = 1250;\r
+\r
+export class SamsungWatchLaterAppElement extends PolymerElement {\r
+ static get is() {\r
+ return 'samsung-watchlater-app';\r
+ }\r
+\r
+ static get template() {\r
+ return getTemplate();\r
+ }\r
+\r
+ static get properties() {\r
+ return {\r
+ thumbnailOptions: {\r
+ type: Array,\r
+ observer: 'onThumbnailOptionsChanged_',\r
+ },\r
+ thumbnailOptions2:{\r
+ type: Array,\r
+ observer: 'onThumbnailOptionsChanged2_',\r
+ },\r
+ message_: {\r
+ type: String,\r
+ value: "header",\r
+ },\r
+ };\r
+ }\r
+\r
+ thumbnailOptions : any[];\r
+ thumbnailOptions2 : any[];\r
+ grid : GridController;\r
+ constructor () {\r
+ super();\r
+ this.thumbnailOptions = [];\r
+ this.thumbnailOptions2 = [];\r
+ }\r
+\r
+ override async connectedCallback() {\r
+ super.connectedCallback();\r
+ let thumbnailItems : any = getWatchLaterData();\r
+ console.log(thumbnailItems);\r
+ let itemCount : number = 1;\r
+ for (const item of thumbnailItems) {\r
+ let op = {\r
+ 'element_id' : itemCount++,\r
+ 'favicon' : "chrome://image/?"+item.favicon_data,\r
+ 'url' : item.url,\r
+ 'title' : item.title,\r
+ }\r
+ this.thumbnailOptions.push(op);\r
+ }\r
+ }\r
+\r
+ onClicked_(event:any){\r
+ console.log(event);\r
+ }\r
+\r
+ onErroInImageLoad_(event:any){\r
+ const img = event.target;\r
+ img.src = "chrome://resources/images/samsung/wb_logo_web_32.png";\r
+ }\r
+\r
+ onRemovewatchingWatchLaterClicked_(event:any){\r
+ console.log(event);\r
+ const RemoveButton = event.target;\r
+ this.thumbnailOptions = [];\r
+ if(RemoveButton.id == "buttonRemoveAllText"){\r
+ console.log('Button Remove all clicked');\r
+ }\r
+ }\r
+ onDeleteClicked_(event:any){\r
+ console.log('onDeleteClicked_');\r
+ const RemoveElement = event.target;\r
+ event.stopPropagation();\r
+ this.thumbnailOptions.forEach(element => {\r
+ if(element.element_id == RemoveElement.id){\r
+ console.log('Removed');\r
+ let index = this.thumbnailOptions.indexOf(element);\r
+ this.thumbnailOptions.splice(index,1);\r
+ this.notifySplices('thumbnailOptions',[{index:index,remove:[element],addedCount:0}]);\r
+ }\r
+ });\r
+ }\r
+ public OnClicked() : void {\r
+ console.log('Invoked');\r
+ }\r
+ private onThumbnailOptionsChanged_() {\r
+ console.log('onThumbnailOptionsChanged_');\r
+ }\r
+ private cleanUrl(s: string): string {\r
+ const s2 = s.replace(/(\(|\)|\,|\s|\'|\"|\\)/g, '\\$1');\r
+ return `url("${s2}")`;\r
+ }\r
+}\r
+\r
+//enable hybrid after 1.25sec so all elements must be loaded.\r
+setTimeout(HybridNavigation,timeForPageToLoad);\r
+declare global {\r
+ interface HTMLElementTagNameMap {\r
+ 'samsung-watchlater-app': SamsungWatchLaterAppElement;\r
+ }\r
+}\r
+\r
+customElements.define(SamsungWatchLaterAppElement.is, SamsungWatchLaterAppElement);
\ No newline at end of file
},
#IS_SAMSUNG_BROWSER
"<(SHARED_INTERMEDIATE_DIR)/chrome/browser/resources/samsung/resources.grd": {
- "META": {"sizes": {"includes": [50]}},
+ "META": {"sizes": {"includes": [100]}},
"includes": [5280],
},
#IS_SAMSUNG_BROWSER