@@ -19,14 +19,12 @@
{{/if}}
{{/if}}
{{#if hasSource}}
- {{#unless isDocked}}
- {{#if canDock}}
-
- {{_ "Livestream_undocked" }}
-
- {{else}}
+ {{#unless isPopoutOpen}}
+
+ {{else}}
+ {{#unless canDock}}
- {{/if}}
+ {{/unless}}
{{/unless}}
{{else}}
{{_ "Livestream_not_found" }}
diff --git a/packages/rocketchat-livestream/client/views/liveStreamTab.js b/packages/rocketchat-livestream/client/views/liveStreamTab.js
index 860a5c81015..da5e560d97d 100644
--- a/packages/rocketchat-livestream/client/views/liveStreamTab.js
+++ b/packages/rocketchat-livestream/client/views/liveStreamTab.js
@@ -2,25 +2,33 @@
import toastr from 'toastr';
function parseUrl(url) {
+ const options = {};
const parsedUrl = url.match(/(http:|https:|)\/\/(clips.|player.|www.)?(twitch\.tv|vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/|embed\?clip=)?([A-Za-z0-9._%-]*)(\&\S+)?/);
- let source = url;
+ options.url = url;
if (parsedUrl != null) {
if (parsedUrl[3].includes('youtu')) {
- source = `https://www.youtube.com/embed/${ parsedUrl[6] }?showinfo=0`;
+ options.url = `https://www.youtube.com/embed/${ parsedUrl[6] }?showinfo=0`;
+ options.thumbnail = `https://img.youtube.com/vi/${ parsedUrl[6] }/0.jpg`;
} else if (parsedUrl[3].includes('vimeo')) {
- source = `https://player.vimeo.com/video/${ parsedUrl[6] }`;
+ options.url = `https://player.vimeo.com/video/${ parsedUrl[6] }`;
} else if (parsedUrl[3].includes('twitch')) {
- source = `http://player.twitch.tv/?channel=${ parsedUrl[6] }`;
+ options.url = `http://player.twitch.tv/?channel=${ parsedUrl[6] }`;
}
// @TODO add support for other urls
- return source;
}
+ return options;
}
Template.liveStreamTab.helpers({
streamingSource() {
return Template.instance().streamingOptions.get() ? Template.instance().streamingOptions.get().url : '';
},
+ thumbnailUrl() {
+ return Template.instance().streamingOptions.get() ? Template.instance().streamingOptions.get().thumbnail : '';
+ },
+ hasThumbnail() {
+ return !!Template.instance().streamingOptions.get() && !!Template.instance().streamingOptions.get().thumbnail && Template.instance().streamingOptions.get().thumbnail !== '';
+ },
hasSource() {
return !!Template.instance().streamingOptions.get() && !!Template.instance().streamingOptions.get().url && Template.instance().streamingOptions.get().url !== '';
},
@@ -34,25 +42,28 @@ Template.liveStreamTab.helpers({
const livestreamTabSource = Template.instance().streamingOptions.get().url;
let popoutSource = null;
try {
- popoutSource = Blaze.getData(popout.context).data && Blaze.getData(popout.context).data.streamingSource;
+ if (popout.context) {
+ popoutSource = Blaze.getData(popout.context).data && Blaze.getData(popout.context).data.streamingSource;
+ }
} catch (e) {
return false;
} finally {
- if (livestreamTabSource === popoutSource) {
+ if (popoutSource != null && livestreamTabSource === popoutSource) {
return true;
} else {
return false;
}
}
},
- isDocked() {
- return popout.docked;
+ isPopoutOpen() {
+ return Template.instance().popoutOpen.get();
}
});
Template.liveStreamTab.onCreated(function() {
this.editing = new ReactiveVar(false);
this.streamingOptions = new ReactiveVar();
+ this.popoutOpen = new ReactiveVar(popout.context != null);
this.autorun(() => {
const room = RocketChat.models.Rooms.findOne(this.data.rid, { fields: { streamingOptions : 1 } });
@@ -60,14 +71,15 @@ Template.liveStreamTab.onCreated(function() {
});
});
Template.liveStreamTab.onRendered(function() {
- if (popout.context == null && (!!this.streamingOptions.get().url && this.streamingOptions.get().url !== '')) {
- popout.open({
- content: 'liveStreamView',
- data: {
- 'streamingSource': this.streamingOptions.get().url
- }
- });
- }
+ // console.log('rendered');
+ // if (popout.context == null && (!!this.streamingOptions.get().url && this.streamingOptions.get().url !== '')) {
+ // popout.open({
+ // content: 'liveStreamView',
+ // data: {
+ // 'streamingSource': this.streamingOptions.get().url
+ // }
+ // });
+ // }
});
Template.liveStreamTab.onDestroyed(function() {
@@ -85,9 +97,7 @@ Template.liveStreamTab.events({
'click .js-save'(e, i) {
e.preventDefault();
- const streamingOptions = {
- url: parseUrl(i.find('[name=streamingOptions]').value)
- };
+ const streamingOptions = parseUrl(i.find('[name=streamingOptions]').value);
Meteor.call('saveRoomSettings', this.rid, 'streamingOptions', streamingOptions, function(err) {
if (err) {
@@ -115,23 +125,39 @@ Template.liveStreamTab.events({
'streamingSource': Template.instance().streamingOptions.get().url
}
});
+ },
+ 'submit [name=streamingOptions]'(e) {
+ e.preventDefault();
+ },
+ 'click .js-popout'(e, i) {
+ e.preventDefault();
+ popout.open({
+ content: 'liveStreamView',
+ data: {
+ 'streamingSource': Template.instance().streamingOptions.get().url
+ }
+ });
+ i.popoutOpen.set(true);
}
});
-RocketChat.callbacks.add('enter-room', function() {
+RocketChat.callbacks.add('roomExit', function() {
if (popout.context != null && popout.docked) {
- const room = RocketChat.models.Rooms.findOne(Session.get('openedRoom'), { fields: { streamingOptions : 1 } });
-
- if (room.streamingOptions && room.streamingOptions.url !== popout.config.data.streamingSource) {
- popout.close();
- if (document.querySelector('.flex-tab-bar .tab-button.active') && document.querySelector('.flex-tab-bar .tab-button.active').title === 'Livestream') {
- popout.open({
- content: 'liveStreamView',
- data: {
- 'streamingSource': room.streamingOptions.url
- }
- });
- }
- }
+ popout.close();
}
}, RocketChat.callbacks.priority.HIGH, 'close-docked-popout');
+
+RocketChat.callbacks.add('enter-room', function() {
+ // console.log('enter-room');
+ // const room = RocketChat.models.Rooms.findOne(Session.get('openedRoom'), { fields: { streamingOptions : 1 } });
+ // if (popout.docked && (room.streamingOptions && room.streamingOptions.url !== popout.config.data.streamingSource)) {
+ // if (document.querySelector('.flex-tab-bar .tab-button.active') && document.querySelector('.flex-tab-bar .tab-button.active').title === 'Livestream') {
+ // popout.open({
+ // content: 'liveStreamView',
+ // data: {
+ // 'streamingSource': room.streamingOptions.url
+ // }
+ // });
+ // }
+ // }
+}, RocketChat.callbacks.priority.HIGH, 'reopen-popout');
diff --git a/packages/rocketchat-livestream/client/views/liveStreamView.html b/packages/rocketchat-livestream/client/views/liveStreamView.html
index 12fb159cc63..2b6d5631f8b 100644
--- a/packages/rocketchat-livestream/client/views/liveStreamView.html
+++ b/packages/rocketchat-livestream/client/views/liveStreamView.html
@@ -3,10 +3,10 @@
-
+