ui/component/buttonNavigation/view.jsx

@@ -17,56 +17,58 @@ type Props = {
   },
 };
 
+// determines which slice of entries should make up the back or forward button drop-downs (isBackward vs !isBackward respectively)
+const sliceEntries = (currentIndex, entries, historyLength, isBackward) => {
+  const l = isBackward ? 0 : currentIndex + 1;
+  const r = isBackward ? currentIndex : historyLength;
+  return entries.slice(l, r);
+};
+
 const ButtonNavigation = (props: Props) => {
   const { isBackward, history } = props;
+  const { entries, go } = history;
+  const currentIndex = history.index;
+  const historyLength = history.length;
   const [showHistory, setShowHistory] = useState(false);
 
-  const makeEntrySlice = useCallback(() => {
-    const left = isBackward ? 1 : history.index + 1;
-    const right = isBackward ? history.index : history.length;
-    return history.entries.slice(left, right);
-  }, [history, isBackward]);
-
+  // creates an <li> intended for the button's <ul>
   const makeItem = useCallback(
     (entry, index) => {
-      const goArg = isBackward ? index - history.index : history.index - index;
-      console.log(`index: ${index}, currentIndex: ${history.index}, goArg: ${goArg}, title: ${entry.title}`);
+      // difference between the current index and the index of the entry
+      const goArg = isBackward ? index - currentIndex : index + 1;
       return (
         <li
           key={entry.key}
-          onClick={() => {
-            setShowHistory(!showHistory);
-            history.go(goArg);
+          onMouseDown={() => {
+            setShowHistory(false);
+            go(goArg);
           }}
         >
           {entry.title}
         </li>
       );
     },
-    [isBackward, history, showHistory]
+    [currentIndex, isBackward, go]
   );
-
+  const slicedEntries = sliceEntries(currentIndex, entries, historyLength, isBackward);
   return (
     <div>
       <Button
         className={`header__navigation-item header__navigation-item--${isBackward ? 'back' : 'forward'}`}
         description={isBackward ? __('Navigate back') : __('Navigate forward')}
+        onBlur={() => setShowHistory(false)}
         onClick={() => (isBackward ? history.goBack() : history.goForward())}
         onContextMenu={e => {
           setShowHistory(!showHistory);
           // the following three lines prevent the regular context menu (right click menu) from appearing
           e.preventDefault();
           e.stopPropagation();
-          return false; // returning false disables the regular context menu
+          return false;
         }}
         icon={isBackward ? ICONS.ARROW_LEFT : ICONS.ARROW_RIGHT}
         iconSize={18}
       />
-      {showHistory && (
-        <ul className={'header__navigaiton-dropdown'} style={{ position: 'absolute' }}>
-          {makeEntrySlice().map(makeItem)}
-        </ul>
-      )}
+      {showHistory && <ul className={'header__navigaiton-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
     </div>
   );
 };

ui/component/header/view.jsx

@@ -115,7 +115,7 @@ const Header = (props: Props) => {
           {!authHeader && (
             <div className="header__navigation-arrows">
               <ButtonNavigation isBackward history={history} />
-              <ButtonNavigation history={history} />
+              <ButtonNavigation isBackward={false} history={history} />
             </div>
           )}
           {/* @endif */}

ui/page/show/view.jsx

@@ -21,11 +21,24 @@ type Props = {
   }>,
   title: string,
   claimIsMine: Boolean,
+  history: {
+    entries: { title: string }[],
+    goBack: () => void,
+    goForward: () => void,
+    index: number,
+    length: number,
+    location: { pathname: string },
+    push: string => void,
+    state: {},
+    replaceState: ({}, string, string) => void,
+  },
 };
 
 function ShowPage(props: Props) {
-  const { isResolvingUri, resolveUri, uri, claim, blackListedOutpoints, location, title, claimIsMine } = props;
+  const { isResolvingUri, resolveUri, uri, claim, blackListedOutpoints, location, title, claimIsMine, history } = props;
   const { channelName, streamName } = parseURI(uri);
+  const { entries } = history;
+  const entryIndex = history.index;
   const signingChannel = claim && claim.signing_channel;
   const canonicalUrl = claim && claim.canonical_url;
   const claimExists = claim !== null && claim !== undefined;
@@ -57,10 +70,11 @@ function ShowPage(props: Props) {
       document.title = IS_WEB ? SITE_TITLE : 'LBRY';
     }
 
+    entries[entryIndex].title = document.title;
     return () => {
       document.title = IS_WEB ? SITE_TITLE : 'LBRY';
     };
-  }, [title, channelName, streamName]);
+  }, [channelName, entries, entryIndex, streamName, title]);
 
   let innerContent = '';
 

ui/scss/component/_header.scss

@@ -149,8 +149,10 @@
 }
 
 .header__navigaiton-dropdown {
+  position: absolute;
   list-style-type: none;
   background-color: var(--color-header-background);
+  margin-top: 5px;
 
   li {
     margin: 0;

ui/store.js

@@ -102,13 +102,6 @@ history = createMemoryHistory();
 history = createBrowserHistory();
 // @endif
 
-history.listen((l, a) => {
-  console.log('document.title: ', document.title);
-  console.log('history: ', history);
-  document.oncontextmenu = () => false;
-  l.title = document.title;
-});
-
 const triggerSharedStateActions = [
   ACTIONS.CHANNEL_SUBSCRIBE,
   ACTIONS.CHANNEL_UNSUBSCRIBE,