src/renderer/component/videoOverlay/index.js

@@ -1,9 +1,14 @@
 import { connect } from 'react-redux';
 import { selectPlayingUri } from 'redux/selectors/content';
+import { doSetPlayingUri } from 'redux/actions/content';
 import VideoOverlay from './view';
 
 const select = state => ({
   playingUri: selectPlayingUri(state),
 });
 
-export default connect(select, null)(VideoOverlay);
+const perform = dispatch => ({
+  cancelPlay: () => dispatch(doSetPlayingUri(null)),
+});
+
+export default connect(select, perform)(VideoOverlay);

src/renderer/component/videoOverlay/view.jsx

@@ -1,22 +1,22 @@
 // @flow
 import React from 'react';
 import Video from 'component/video';
-import FileActions from 'component/fileActions';
 import Overlay from 'component/overlay';
+import VideoOverlayHeader from '../videoOverlayHeader';
 
 type Props = {
+  cancelPlay: () => void,
   playingUri: ?string,
 };
 
 class VideoOverlay extends React.Component<Props> {
   render() {
-    const { playingUri } = this.props;
+    const { playingUri, cancelPlay } = this.props;
+    if (!playingUri) return '';
     return (
       <Overlay>
-        <div className="card-media__internal-links">
+        <VideoOverlayHeader uri={playingUri} onClose={cancelPlay} />
-          <FileActions uri={playingUri} vertical />
+        <Video className="content__embedded" uri={playingUri} overlayed />
-        </div>
-        {playingUri ? <Video className="content__embedded" uri={playingUri} overlayed /> : ''}
       </Overlay>
     );
   }

src/renderer/component/videoOverlayHeader/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { makeSelectTitleForUri } from 'lbry-redux';
+import VideoOverlayHeader from './view';
+
+const select = (state, props) => ({
+  title: makeSelectTitleForUri(props.uri)(state),
+  onClose: props.onClose,
+});
+
+export default connect(select, null)(VideoOverlayHeader);

src/renderer/component/videoOverlayHeader/view.jsx

@@ -0,0 +1,31 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import * as icons from 'constants/icons';
+import TruncatedText from 'component/common/truncated-text';
+
+type Props = {
+  onClose: () => void,
+  title: string,
+};
+
+class VideoOverlayHeader extends React.Component<Props> {
+  render() {
+    const { onClose, title } = this.props;
+    return (
+      <header className="video_overlay__header">
+        <h4 className="overlay__title--small">
+          <TruncatedText lines={2}>{title}</TruncatedText>
+        </h4>
+        <Button
+          icon={icons.CLOSE}
+          onClick={() => {
+            onClose();
+          }}
+        />
+      </header>
+    );
+  }
+}
+
+export default VideoOverlayHeader;

src/renderer/scss/component/_overlay.scss

@@ -8,21 +8,21 @@
   right: 1%;
   z-index: 3;
   box-shadow: var(--box-shadow-layer);
+}
 
-  &:hover .button-close {
+.video_overlay__header {
-    display: inline-block;
+  flex-direction: row;
-    background: rgba(0, 0, 0, 0.5);
+  justify-content: space-between;
-    position: absolute;
+  align-items: center;
-    height: 22px;
+  flex-wrap: nowrap;
-    width: 22px;
+  display: flex;
-    top: 0px;
+  width: 100%;
-    right: 0px;
+  height: 2rem;
-    color: #000;
+  background-color: var(--header-primary-color);
-    text-align: center;
+  padding: 20px 10px;
-    cursor: pointer;
+
-    z-index: 4;
+  .overlay__title--small {
+    font-size: 15px;
+    line-height: 15px;
   }
 }
-.overlay .button-close {
-  display: none;
-}