Separate top revealer title and time

css/styles.css

@@ -58,6 +58,9 @@ radio {
 .adwrounded.tiled-bottom {
   border-radius: 0px;
 }
+.roundedcorners {
+  border-radius: 8px;
+}
 
 .videowidget {
   min-width: 336px;
@@ -105,14 +108,10 @@ radio {
   font-size: 23px;
   text-shadow: none;
 }
-.tvrevealerboxtop {
+
+/* Top Revealer */
+.tvmode .revealertopgrid {
   font-family: 'Cantarell', sans-serif;
-  border-radius: 8px;
-  border-bottom-right-radius: 0px;
-}
-.tvrevealerboxbottom {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
 }
 .tvmode .tvtitle {
   font-size: 28px;
@@ -120,20 +119,21 @@ radio {
   text-shadow: none;
 }
 .tvtime {
+  margin-top: -2px;
+  margin-bottom: -2px;
+  min-height: 4px;
   font-size: 38px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
 .tvendtime {
   margin-top: -4px;
-  min-height: 4px;
+  margin-bottom: 2px;
+  min-height: 6px;
   font-size: 24px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
-.revealerbottombox {
-  border-radius: 8px;
-}
 
 /* Button Inside Popover */
 .popoverbutton {

src/revealers.js

@@ -58,23 +58,26 @@ class ClapperRevealerTop extends CustomRevealer
             ellipsize: Pango.EllipsizeMode.END,
             halign: Gtk.Align.START,
             valign: Gtk.Align.CENTER,
-            hexpand: true,
             margin_start: 10,
+            margin_end: 10,
+            visible: false,
         });
         this.mediaTitle.add_css_class('tvtitle');
 
         this.currentTime = new Gtk.Label({
             halign: Gtk.Align.END,
             valign: Gtk.Align.CENTER,
-            margin_start: 24,
+            margin_start: 10,
             margin_end: 10,
         });
         this.currentTime.add_css_class('tvtime');
 
         this.endTime = new Gtk.Label({
+            halign: Gtk.Align.END,
+            valign: Gtk.Align.START,
             margin_start: 10,
             margin_end: 10,
-            margin_bottom: 2,
+            visible: false,
         });
         this.endTime.add_css_class('tvendtime');
 
@@ -85,30 +88,38 @@ class ClapperRevealerTop extends CustomRevealer
         revealerBox.append(this.headerBar);
 
         this.revealerGrid = new Gtk.Grid({
-            visible: false,
+            column_spacing: 4,
             margin_top: 8,
             margin_start: 8,
             margin_end: 8,
+            visible: false,
         });
+        this.revealerGrid.add_css_class('revealertopgrid');
 
-        const topBox = new Gtk.Box({
+        const topLeftBox = new Gtk.Box({
             orientation: Gtk.Orientation.HORIZONTAL,
         });
-        topBox.add_css_class('osd');
+        topLeftBox.add_css_class('osd');
-        topBox.add_css_class('tvrevealerboxtop');
+        topLeftBox.add_css_class('roundedcorners');
-        topBox.append(this.mediaTitle);
+        topLeftBox.append(this.mediaTitle);
-        topBox.append(this.currentTime);
 
-        const bottomBox = new Gtk.Box({
+        const topSpacerBox = new Gtk.Box({
             orientation: Gtk.Orientation.HORIZONTAL,
+            hexpand: true,
+        });
+
+        const topRightBox = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
             halign: Gtk.Align.END,
         });
-        bottomBox.add_css_class('osd');
+        topRightBox.add_css_class('osd');
-        bottomBox.add_css_class('tvrevealerboxbottom');
+        topRightBox.add_css_class('roundedcorners');
-        bottomBox.append(this.endTime);
+        topRightBox.append(this.currentTime);
+        topRightBox.append(this.endTime);
 
-        this.revealerGrid.attach(topBox, 0, 0, 2, 1);
+        this.revealerGrid.attach(topLeftBox, 0, 0, 1, 1);
-        this.revealerGrid.attach(bottomBox, 1, 1, 1, 1);
+        this.revealerGrid.attach(topSpacerBox, 1, 0, 1, 1);
+        this.revealerGrid.attach(topRightBox, 2, 0, 1, 2);
         revealerBox.append(this.revealerGrid);
 
         this.set_child(revealerBox);
@@ -124,6 +135,16 @@ class ClapperRevealerTop extends CustomRevealer
         return this.mediaTitle.label;
     }
 
+    set showTitle(isShow)
+    {
+        this.mediaTitle.visible = isShow;
+    }
+
+    get showTitle()
+    {
+        return this.mediaTitle.visible;
+    }
+
     setTimes(currTime, endTime)
     {
         const now = currTime.format(this.timeFormat);
@@ -140,6 +161,20 @@ class ClapperRevealerTop extends CustomRevealer
 
         return nextUpdate;
     }
+
+    setFullscreenMode(isFullscreen, isMobileMonitor)
+    {
+        const isTvMode = (isFullscreen && !isMobileMonitor);
+
+        this.headerBar.visible = !isTvMode;
+        this.revealerGrid.visible = isTvMode;
+
+        this.headerBar.extraButtonsBox.visible = !isFullscreen;
+
+        this.transition_type = (isTvMode)
+            ? Gtk.RevealerTransitionType.SLIDE_DOWN
+            : Gtk.RevealerTransitionType.CROSSFADE;
+    }
 });
 
 var RevealerBottom = GObject.registerClass(
@@ -160,7 +195,7 @@ class ClapperRevealerBottom extends CustomRevealer
             margin_bottom: 8,
         });
         this.revealerBox.add_css_class('osd');
-        this.revealerBox.add_css_class('revealerbottombox');
+        this.revealerBox.add_css_class('roundedcorners');
 
         this.set_child(this.revealerBox);
 

src/widget.js

@@ -152,12 +152,7 @@ class ClapperWidget extends Gtk.Grid
 
         this._changeControlsPlacement(isFullscreen);
         this.controls.setFullscreenMode(isFullscreen);
-
+        this.revealerTop.setFullscreenMode(isFullscreen, this.isMobileMonitor);
-        const headerbar = this.revealerTop.headerBar;
-        headerbar.visible = (!isFullscreen || this.isMobileMonitor);
-        headerbar.extraButtonsBox.visible = !isFullscreen;
-
-        this.revealerTop.revealerGrid.visible = !headerbar.visible;
 
         if(this.revealerTop.child_revealed)
             this._checkSetUpdateTimeInterval();
@@ -328,6 +323,7 @@ class ClapperWidget extends Gtk.Grid
 
         this.root.title = title;
         this.revealerTop.title = title;
+        this.revealerTop.showTitle = true;
     }
 
     updateTime()