[NextBrowser] Basic Ui for the watchLater feature. 73/320773/7
authorshahnawaz.a <shahnawaz.a@samsung.com>
Fri, 22 Nov 2024 06:31:50 +0000 (12:01 +0530)
committerBot Blink <blinkbot@samsung.com>
Wed, 27 Nov 2024 11:01:45 +0000 (11:01 +0000)
Change-Id: I4f942982b74a6eeff7ab2e40696a01f0801d7a53
Signed-off-by: shahnawaz.a <shahnawaz.a@samsung.com>
chrome/browser/resources/samsung/BUILD.gn
chrome/browser/resources/samsung/quick.js
chrome/browser/resources/samsung/samsung_featured.html
chrome/browser/resources/samsung/samsung_featured.ts
chrome/browser/resources/samsung/samsung_featured_app.html
chrome/browser/resources/samsung/samsung_featured_header.html
chrome/browser/resources/samsung/samsung_featured_quick.css
chrome/browser/resources/samsung/samsung_utils.ts
chrome/browser/resources/samsung/samsung_watchlater_app.html [new file with mode: 0644]
chrome/browser/resources/samsung/samsung_watchlater_app.ts [new file with mode: 0644]
tools/gritsettings/resource_ids.spec

index 18333c47038f4653d4e3898d31a6204974e50389..508b4eefb34633fb87db90eecb40fa6f3c301998 100644 (file)
@@ -11,6 +11,7 @@ build_webui("build") {
     "samsung_featured_app.ts",
     "samsung_featured_header.js",
     "samsung_opentabs_app.js",
+    "samsung_watchlater_app.ts",
   ]
   non_web_component_files = [
     "samsung_data_service.ts",
index 74876506929e40333a3575213bc5c6f3d995940b..f9da917ee6aa2b6a2285a228f106cb2cc85b038e 100644 (file)
@@ -19,19 +19,28 @@ function settingPageVisibility(loc)
 {
     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');
+    }
 
 }
 
index 2eaba2657eb22bd9b67ff940ec208de47927c430..a98a48bddaca5b907036642743c5489ef11a97ba 100644 (file)
@@ -8,6 +8,7 @@
     <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 {
@@ -18,4 +19,5 @@
   <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
index 89177299573951ae6f84c0234efc9c445630d5a2..bf2a80a14545c945186fb3cfb7c2fcca219880c5 100644 (file)
@@ -4,6 +4,8 @@
 
 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
index a106c18ba29c87164eaf8857f40489db06b5d561..64d30fb9c3806109c970f225c9cabd8b25870c46 100644 (file)
@@ -3,18 +3,6 @@
     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'>
index 3a560948e1779b300943a414ab46dffc7c6bbdd5..012006f196eb94392258246119c2ed40b3e1eecb 100644 (file)
       <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>
index 50b9d7377b15fa45dc8a917eb9ea3b575e2c8400..a425b82fe61086c57406b94904b4f3a975cabd68 100644 (file)
@@ -52,7 +52,7 @@
 }
 
 #buttonWrapper.headerList .button {
-  width: calc(50% - 2px);
+  width: calc(30% - 2px);
 }
 
 #buttonWrapper .button.deselected:hover {
index 7abd4addbaf88c88b25f755610f96d1c8f80a5db..e991d9d28ddd70fe22b87d98108aeb5327f5e367 100644 (file)
@@ -240,3 +240,62 @@ private getExtraParameters(divElement:  string) : string {
   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"
+    }
+]
+}
diff --git a/chrome/browser/resources/samsung/samsung_watchlater_app.html b/chrome/browser/resources/samsung/samsung_watchlater_app.html
new file mode 100644 (file)
index 0000000..b6ad8e2
--- /dev/null
@@ -0,0 +1,115 @@
+<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
diff --git a/chrome/browser/resources/samsung/samsung_watchlater_app.ts b/chrome/browser/resources/samsung/samsung_watchlater_app.ts
new file mode 100644 (file)
index 0000000..d5f7bfb
--- /dev/null
@@ -0,0 +1,114 @@
+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
index b994918874a8719e7d707fed89466121e2612a47..b959d75fa9693fcec749033359e532ca93687401 100644 (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