Improves drag-n-drop ux

packages/rocketchat-livestream/client/views/liveStreamTab.js

@@ -125,6 +125,7 @@ Template.liveStreamTab.events({
 				data: {
 					streamingSource: i.streamingOptions.get().url,
 					isAudioOnly: i.streamingOptions.get().isAudioOnly,
+					showVideoControls: true,
 					streamingOptions:  i.streamingOptions.get()
 				},
 				onCloseCallback: () => i.popoutOpen.set(false)
@@ -160,6 +161,7 @@ Template.liveStreamTab.events({
 			data: {
 				streamingSource: i.streamingOptions.get().url,
 				isAudioOnly: i.streamingOptions.get().isAudioOnly,
+				showVideoControls: true,
 				streamingOptions:  i.streamingOptions.get()
 			},
 			onCloseCallback: () => i.popoutOpen.set(false)

packages/rocketchat-theme/client/imports/components/popout.css

@@ -1,6 +1,6 @@
 .rc-popout {
 	min-width: 380px;
-	max-width: 600px;
+	max-width: 800px;
 
 	border: solid 4px var(--rc-color-primary-darkest);
 	background: var(--rc-color-primary-darkest);

packages/rocketchat-ui/client/views/app/popout.html

@@ -3,18 +3,20 @@
 		<div class="rc-popout rc-popout--{{ state }}" data-modal="modal">
 			<header class="rc-popout__header">
 				<h1 class="rc-popout__title">{{> icon icon="podcast"}}</h1>
-				<div class="rc-popout__controls">
-					{{#if isPlaying}}
-						<button class="rc-popout__controls--pause"> {{> icon icon="pause" }} </button>
-					{{else}}
-						<button class="rc-popout__controls--play"> {{> icon icon="play" }} </button>
-					{{/if}}
-					{{#if isMuted}}
-						<button class="rc-popout__controls--unmute"> {{> icon icon="volume-mute" }} </button>
-					{{else}}
-						<button class="rc-popout__controls--mute"> {{> icon icon="volume" }} </button>
-					{{/if}}
-				</div>
+				{{#if showVideoControls}}
+					<div class="rc-popout__controls">
+						{{#if isPlaying}}
+							<button class="rc-popout__controls--pause"> {{> icon icon="pause" }} </button>
+						{{else}}
+							<button class="rc-popout__controls--play"> {{> icon icon="play" }} </button>
+						{{/if}}
+						{{#if isMuted}}
+							<button class="rc-popout__controls--unmute"> {{> icon icon="volume-mute" }} </button>
+						{{else}}
+							<button class="rc-popout__controls--mute"> {{> icon icon="volume" }} </button>
+						{{/if}}
+					</div>
+				{{/if}}
 				{{#unless isAudioOnly}}
 					<button class="contextual-bar__minimize js-minimize">
 						{{> icon classes="rc-popout__minimize" icon="angle-down"}}
@@ -29,18 +31,21 @@
 				{{#if content}}
 					{{> Template.dynamic template=content data=data}}
 				{{/if}}
-				<div class="rc-popout__controls">
-					{{#if isPlaying}}
-						<button class="rc-popout__controls--pause"> {{> icon icon="pause" }} </button>
-					{{else}}
-						<button class="rc-popout__controls--play"> {{> icon icon="play" }} </button>
-					{{/if}}
-					{{#if isMuted}}
-						<button class="rc-popout__controls--unmute"> {{> icon icon="volume-mute" }} </button>
-					{{else}}
-						<button class="rc-popout__controls--mute"> {{> icon icon="volume" }} </button>
-					{{/if}}
-				</div>
+
+				{{#if showVideoControls}}
+					<div class="rc-popout__controls">
+						{{#if isPlaying}}
+							<button class="rc-popout__controls--pause"> {{> icon icon="pause" }} </button>
+						{{else}}
+							<button class="rc-popout__controls--play"> {{> icon icon="play" }} </button>
+						{{/if}}
+						{{#if isMuted}}
+							<button class="rc-popout__controls--unmute"> {{> icon icon="volume-mute" }} </button>
+						{{else}}
+							<button class="rc-popout__controls--mute"> {{> icon icon="volume" }} </button>
+						{{/if}}
+					</div>
+				{{/if}}
 			</main>
 
 		</div>

packages/rocketchat-ui/client/views/app/popout.js

@@ -3,6 +3,7 @@
 this.popout = {
 	context: null,
 	isAudioOnly: false,
+	showVideoControls: true,
 	x: 0,
 	y: 0,
 	open(config = {}, fn) {
@@ -17,6 +18,7 @@ this.popout = {
 		}
 		if (config.data) {
 			this.isAudioOnly = config.data.isAudioOnly;
+			this.showVideoControls = config.data.showVideoControls;
 		}
 	},
 	close() {
@@ -32,11 +34,25 @@ this.popout = {
 			this.onCloseCallback();
 		}
 	},
+	dragstart(event) {
+		if (!event.target.classList.contains('dropzone-overlay')) {
+			const popoutElement = document.querySelector('.rc-popout-wrapper');
+			setTimeout(function() {
+				popoutElement.style.display = 'none';
+			}, 0);
+		}
+	},
 	dragover(event) {
 		const e = event.originalEvent || event;
 		e.dataTransfer.dropEffect = 'move';
 		e.preventDefault();
 	},
+	dragend(event) {
+		if (!event.target.classList.contains('dropzone-overlay')) {
+			const popoutElement = document.querySelector('.rc-popout-wrapper');
+			popoutElement.style.display = 'initial';
+		}
+	},
 	drop(event) {
 		const e = event.originalEvent || event;
 		e.preventDefault();
@@ -63,12 +79,16 @@ Template.popout.helpers({
 	},
 	isPlaying() {
 		return Template.instance().isPlaying.get();
+	},
+	showVideoControls() {
+		return Template.instance().showVideoControls.get();
 	}
 });
 
 Template.popout.onRendered(function() {
 	Template.instance().isMinimized.set(popout.isAudioOnly);
 	Template.instance().isAudioOnly.set(popout.isAudioOnly);
+	Template.instance().showVideoControls.set(popout.showVideoControls);
 
 	if (this.data.onRendered) {
 		this.data.onRendered();
@@ -77,15 +97,21 @@ Template.popout.onRendered(function() {
 Template.popout.onCreated(function() {
 	this.isMinimized = new ReactiveVar(popout.isAudioOnly);
 	this.isAudioOnly = new ReactiveVar(popout.isAudioOnly);
+	this.canOpenExternal = new ReactiveVar(popout.canOpenExternal);
+	this.showVideoControls = new ReactiveVar(popout.showVideoControls);
 	this.isMuted = new ReactiveVar(false);
 	this.isPlaying = new ReactiveVar(true);
+	document.body.addEventListener('dragstart', popout.dragstart, true);
 	document.body.addEventListener('dragover', popout.dragover, true);
+	document.body.addEventListener('dragend', popout.dragend, true);
 	document.body.addEventListener('drop', popout.drop, true);
 });
 
 Template.popout.onDestroyed(function() {
 	popout.context = null;
+	document.body.removeEventListener('dragstart', popout.dragstart, true);
 	document.body.removeEventListener('dragover', popout.dragover, true);
+	document.body.removeEventListener('dragend', popout.dragend, true);
 	document.body.removeEventListener('drop', popout.drop, true);
 });