From ae82b3fc05b20190a1503296bd5e37425952956a Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Thu, 28 May 2020 17:47:18 +0800
Subject: [PATCH] Create transient "status bar" to display the hover URL.

Implementation:
- <StatusBar> listens to 'update-target-url' and will show/hide itself as needed.
- Handled the display of "lbry://" protocol.

CSS:
- The colors chosen should work on both Light and Dark Theme.
- The delay is necessary to avoid blinkies when the mouse is moving around.

#4259
---
 electron/createWindow.js           | 12 ++++++++
 ui/component/common/status-bar.jsx | 48 ++++++++++++++++++++++++++++++
 ui/scss/all.scss                   |  1 +
 ui/scss/component/_status-bar.scss | 23 ++++++++++++++
 4 files changed, 84 insertions(+)
 create mode 100644 ui/component/common/status-bar.jsx
 create mode 100644 ui/scss/component/_status-bar.scss

diff --git a/electron/createWindow.js b/electron/createWindow.js
index 39a3d1d54..f8cb129f1 100644
--- a/electron/createWindow.js
+++ b/electron/createWindow.js
@@ -164,5 +164,17 @@ export default appState => {
     shell.openExternal(url);
   });
 
+  window.webContents.on('update-target-url', (event, url) => {
+    // Change internal links to the lbry protocol. External (https) links should remain unchanged.
+    let dispUrl = url.replace(`http://localhost:${WEBPACK_ELECTRON_PORT}/`, lbryProto);
+    // Non-claims don't need the lbry protocol:
+    if (dispUrl === lbryProto)  {
+      dispUrl = 'Home';
+    } else if (dispUrl.startsWith(lbryProto + '$/')) {
+      dispUrl = dispUrl.replace(lbryProto, '/');
+    }
+    window.webContents.send('update-target-url', dispUrl);
+  });
+
   return window;
 };
diff --git a/ui/component/common/status-bar.jsx b/ui/component/common/status-bar.jsx
new file mode 100644
index 000000000..1bd607a9b
--- /dev/null
+++ b/ui/component/common/status-bar.jsx
@@ -0,0 +1,48 @@
+// @flow
+import React from 'react';
+import { ipcRenderer } from 'electron';
+import classnames from 'classnames';
+
+type Props = {};
+
+type State = {
+  hoverUrl: string,
+  show: boolean,
+};
+
+class StatusBar extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
+    this.state = {
+      hoverUrl: '',
+      show: false,
+    };
+    (this: any).handleUrlChange = this.handleUrlChange.bind(this);
+  }
+
+  componentDidMount() {
+    ipcRenderer.on('update-target-url', this.handleUrlChange);
+  }
+
+  componentWillUnmount() {
+    ipcRenderer.removeListener('update-target-url', this.handleUrlChange);
+  }
+
+  handleUrlChange(event: any, url: string) {
+    // We want to retain the previous URL so that it can fade out
+    // without the component collapsing.
+    if (url === '') {
+      this.setState({ show: false });
+    } else {
+      this.setState({ show: true });
+      this.setState({ hoverUrl: url });
+    }
+  }
+
+  render() {
+    const { hoverUrl, show } = this.state;
+    return <div className={classnames('status-bar', { visible: show })}>{hoverUrl}</div>;
+  }
+}
+
+export default StatusBar;
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 68d2bd5bc..c6ff80fdd 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -44,6 +44,7 @@
 @import 'component/snack-bar';
 @import 'component/spinner';
 @import 'component/splash';
+@import 'component/status-bar';
 @import 'component/subscriptions';
 @import 'component/syntax-highlighter';
 @import 'component/table';
diff --git a/ui/scss/component/_status-bar.scss b/ui/scss/component/_status-bar.scss
new file mode 100644
index 000000000..d181a532a
--- /dev/null
+++ b/ui/scss/component/_status-bar.scss
@@ -0,0 +1,23 @@
+.status-bar {
+  background-color: #505050;
+  border: solid 1px #707070;
+  border-bottom-color: #505050;
+  border-left-color: #505050;
+  color: #e0e0e0;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  font-size: var(--font-small);
+  padding-top: 2px;
+  padding-left: var(--spacing-xsmall);
+  padding-right: var(--spacing-xsmall);
+  border-top-right-radius: var(--spacing-xsmall);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  transition-delay: 400ms;
+
+  &.visible {
+    opacity: 1;
+    transition-delay: 0s;
+  }
+}