ui/component/router/index.js

@@ -2,10 +2,31 @@ import { connect } from 'react-redux';
 import { selectUserVerifiedEmail } from 'lbryinc';
 import { selectScrollStartingPosition } from 'redux/selectors/app';
 import Router from './view';
+import { normalizeURI, makeSelectTitleForUri } from 'lbry-redux';
 
-const select = state => ({
-  currentScroll: selectScrollStartingPosition(state),
-  isAuthenticated: selectUserVerifiedEmail(state),
-});
+const select = state => {
+  const { pathname, hash } = state.router.location;
+  const urlPath = pathname + hash;
+  // Remove the leading "/" added by the browser
+  const path = urlPath.slice(1).replace(/:/g, '#');
+
+  let uri;
+  try {
+    uri = normalizeURI(path);
+  } catch (e) {
+    const match = path.match(/[#/:]/);
+
+    if (!path.startsWith('$/') && match && match.index) {
+      uri = `lbry://${path.slice(0, match.index)}`;
+    }
+  }
+
+  return {
+    uri,
+    title: makeSelectTitleForUri(uri)(state),
+    currentScroll: selectScrollStartingPosition(state),
+    isAuthenticated: selectUserVerifiedEmail(state),
+  };
+};
 
 export default connect(select)(Router);

ui/component/router/view.jsx

@@ -29,6 +29,8 @@ import SignInPage from 'page/signIn';
 import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
 import EmbedWrapperPage from 'page/embedWrapper';
+import { parseURI } from 'lbry-redux';
+import { SITE_TITLE } from 'config';
 
 // Tell the browser we are handling scroll restoration
 if ('scrollRestoration' in history) {
@@ -61,6 +63,19 @@ type Props = {
   currentScroll: number,
   location: { pathname: string, search: string },
   isAuthenticated: boolean,
+  history: {
+    entries: { title: string }[],
+    goBack: () => void,
+    goForward: () => void,
+    index: number,
+    length: number,
+    location: { pathname: string },
+    push: string => void,
+    state: {},
+    replaceState: ({}, string, string) => void,
+  },
+  uri: string,
+  title: string,
 };
 
 function AppRouter(props: Props) {
@@ -68,7 +83,30 @@ function AppRouter(props: Props) {
     currentScroll,
     location: { pathname },
     isAuthenticated,
+    history,
+    uri,
+    title,
   } = props;
+  const { channelName, streamName } = parseURI(uri);
+  const { entries } = history;
+  const entryIndex = history.index;
+
+  useEffect(() => {
+    if (typeof title !== 'undefined' && title !== '') {
+      document.title = title;
+    } else if (typeof streamName !== 'undefined' && streamName !== 'undefined' && streamName !== '') {
+      document.title = streamName;
+    } else if (typeof channelName !== 'undefined' && channelName !== '') {
+      document.title = channelName;
+    } else {
+      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+    }
+
+    entries[entryIndex].title = document.title;
+    return () => {
+      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
+    };
+  }, [channelName, entries, entryIndex, streamName, title]);
 
   useEffect(() => {
     window.scrollTo(0, currentScroll);

ui/page/show/view.jsx

@@ -1,12 +1,10 @@
 // @flow
 import React, { useEffect } from 'react';
-import { parseURI } from 'lbry-redux';
 import BusyIndicator from 'component/common/busy-indicator';
 import ChannelPage from 'page/channel';
 import FilePage from 'page/file';
 import Page from 'component/page';
 import Button from 'component/button';
-import { SITE_TITLE } from 'config';
 import Card from 'component/common/card';
 
 type Props = {
@@ -35,10 +33,7 @@ type Props = {
 };
 
 function ShowPage(props: 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 { isResolvingUri, resolveUri, uri, claim, blackListedOutpoints, location, claimIsMine, history } = props;
   const signingChannel = claim && claim.signing_channel;
   const canonicalUrl = claim && claim.canonical_url;
   const claimExists = claim !== null && claim !== undefined;
@@ -59,23 +54,6 @@ function ShowPage(props: Props) {
     }
   }, [resolveUri, isResolvingUri, canonicalUrl, uri, claimExists, haventFetchedYet]);
 
-  useEffect(() => {
-    if (title) {
-      document.title = title;
-    } else if (streamName) {
-      document.title = streamName;
-    } else if (channelName) {
-      document.title = channelName;
-    } else {
-      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
-    }
-
-    entries[entryIndex].title = document.title;
-    return () => {
-      document.title = IS_WEB ? SITE_TITLE : 'LBRY';
-    };
-  }, [channelName, entries, entryIndex, streamName, title]);
-
   let innerContent = '';
 
   if (!claim || (claim && !claim.name)) {