Skip to content

Commit

Permalink
Merge pull request #133 from skychatorg/dev/7ph
Browse files Browse the repository at this point in the history 
Multi fixes & improvements
  • Loading branch information
@7PH
7PH authored Jul 28, 2021
2 parents 379bc03 + f59a28c commit bd64039
Show file tree
Hide file tree
Showing 97 changed files with 1,442 additions and 584 deletions.
30 changes: 19 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,14 @@ When multichannel is enabled, here is what it looks like:
![overall-screenshot](./doc/screenshot.png)


### Synchronized Youtube / Twitch / Embedded player
### Synchronized media player

Users can play Youtube, Twitch and self-hosted videos in a shared synchronized players.

The player has two modes:
- A 'free' mode, selected by default, where any user can add a media. Orchestration is implemented through a public queue of videos to play, and decision-making (for instance to skip videos) is done with polls.
- A 'schedule' mode, when users with privilege schedule a media to play at a specific time. These medias can not be skipped, and users can view the schedule to see what medias will play in the upcoming days. When the scheduled media finishes, the player goes back in 'free' mode.

Users can play medias from Youtube, Twitch or their local computer in a shared synchronized player. Orchestration is implemented through a public queue of videos to play, and decision-making (for instance to skip videos) is done with polls. Democracy 💯. If you want it, setup multiple video channels to allow concurrent screenings.
![youtube-short](./doc/youtube-short.gif)

### Live cursor visualization and mini-games
Expand Down Expand Up @@ -119,15 +124,18 @@ The `config/preferences.json` file specifies application preferences. The availa

| field | type | default | description |
|-------|------|---------|-------------|
| minRightForPrivateMessages | number | -1 | Min. right to send private messages |
| minRightForMessageHistory | number | -1 | Min. right to access room message history |
| minRightForAudioRecording | number | -1 | Min. right to share and play audio recordings |
| minRightForConnectedList | number | -1 | Min. right to access the list of currently active users |
| minRightForPolls | number | -1 | Min. right to create polls |
| minRightForGallery | number | -1 | Min. right to access the gallery |
| maxReplacedImagesPerMessage | number | 50 | Max. number of replaced images per message |
| maxReplacedStickersPerMessage | number | 50 | Max. number of replaced stickers per message |
| maxNewlinesPerMessage | number | 20 | Max. number of newlines per message |
| minRightForPrivateMessages | number | -1 | Min. right to send private messages |
| minRightForMessageHistory | number | -1 | Min. right to access room message history |
| minRightForAudioRecording | number | -1 | Min. right to share and play audio recordings |
| minRightForConnectedList | number | -1 | Min. right to access the list of currently active users |
| minRightForPolls | number | -1 | Min. right to create polls |
| minRightForGalleryRead | number \| 'op' | 'op' | Min. right to access the gallery |
| minRightForGalleryWrite | number \| 'op' | 'op' | Min. right to add and remove gallery documents |
| minRightForPlayerAddMedia | number \| 'op' | 'op' | Min. right to add medias to the player |
| minRightForPlayerManageSchedule | number \| 'op' | 'op' | Min. right to manage the player schedules |
| maxReplacedImagesPerMessage | number | 50 | Max. number of replaced images per message |
| maxReplacedStickersPerMessage | number | 50 | Max. number of replaced stickers per message |
| maxNewlinesPerMessage | number | 20 | Max. number of newlines per message |


### Customize plugins
Expand Down
4 changes: 3 additions & 1 deletion app/client/css/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ body {
}
}

.scrollbar {
.scrollbar,
.tui-full-calendar-timegrid-container,
.tui-full-calendar-dayname-container {

/** Firefox */
scrollbar-color: #555 #343434;
Expand Down
16 changes: 8 additions & 8 deletions app/client/src/SkyChatClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ export class SkyChatClient extends EventEmitter {
*/
onMessage(message) {
this.store.commit('Main/NEW_MESSAGE', message);
if (this.store.state.Main.user.right >= 0 && this.store.state.focused) {
if (this.store.state.Main.user.right >= 0 && this.store.state.Main.focused) {
this.notifySeenMessage(message.id);
}
}
Expand All @@ -357,7 +357,7 @@ export class SkyChatClient extends EventEmitter {
*/
onMessages(messages) {
this.store.commit('Main/NEW_MESSAGES', messages);
if (this.store.state.Main.user.right >= 0 && this.store.state.focused && messages.length > 0) {
if (this.store.state.Main.user.right >= 0 && this.store.state.Main.focused && messages.length > 0) {
this.notifySeenMessage(messages[messages.length - 1].id);
}
}
Expand Down Expand Up @@ -388,10 +388,10 @@ export class SkyChatClient extends EventEmitter {

/**
*
* @param data
* @param messageSeen
*/
onMessageSeen(data) {
this.store.commit('Main/MESSAGE_SEEN', data);
onMessageSeen(messageSeen) {
this.store.dispatch('Main/messageSeen', messageSeen);
}

/**
Expand All @@ -412,10 +412,10 @@ export class SkyChatClient extends EventEmitter {

/**
*
* @param users
* @param connectedList
*/
onConnectedList(users) {
this.store.commit('Main/SET_CONNECTED_LIST', users);
onConnectedList(connectedList) {
this.store.dispatch('Main/setConnectedList', connectedList);
}

/**
Expand Down
8 changes: 4 additions & 4 deletions app/client/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,15 @@ window.addEventListener('blur', () => {
});

window.addEventListener('focus', () => {
if (store.state.lastMissedMessage) {
client.notifySeenMessage(store.state.lastMissedMessage.id);
if (store.state.Main.lastMissedMessage) {
client.notifySeenMessage(store.state.Main.lastMissedMessage.id);
}
store.commit('Main/FOCUS');
});
setInterval(() => {

// In case the title is not currently blinking, just update it
if (! store.state.documentTitleBlinking) {
if (! store.state.Main.documentTitleBlinking) {
if (document.title !== store.state.Main.documentTitle) {
document.title = store.state.Main.documentTitle;
}
Expand All @@ -79,6 +79,6 @@ setInterval(() => {
const chars = "┤┘┴└├┌┬┐";
const indexOf = chars.indexOf(document.title[0]);
const newPosition = (indexOf + 1) % chars.length;
document.title = chars[newPosition] + ' ' + store.state.documentTitle;
document.title = chars[newPosition] + ' ' + store.state.Main.documentTitle;

}, 1000);
131 changes: 69 additions & 62 deletions app/client/src/vue/components/channel/PlayerChannelList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@

<hover-card v-for="channel in playerChannels"
:key="channel.id"
:selected="playerChannel === channel.id"
:clickable="true"
:selected="playerChannelId === channel.id"
:border-color="'rgb(255, 130, 130)'"
class="channel"
@click.native="joinChannel(channel.id)"
Expand All @@ -21,37 +22,39 @@
</div>
<div class="channel-meta">
<!-- delete channel (op) -->
<div v-show="playerChannel === channel.id && op"
<div v-show="playerChannelId === channel.id && op"
@click="deleteChannel()"
class="channel-delete mr-1"
class="channel-delete"
title="Delete this channel">
<i class="material-icons md-14">close</i>
</div>
<!-- show if there is a video currently playing -->
<div v-show="channel.playing"
class="channel-player mr-1"
:class="{ 'disabled': playerChannel !== channel.id }"
title="A video is currently playing">
<div class="channel-player-owner">{{channel.currentOwner}}</div>
<i class="material-icons md-14">movie</i>
<!-- users in the channel -->
<div v-for="user of (playerChannelUsers[channel.id] || []).slice(0, 4)"
:key="user.username"
class="avatar image-bubble"
:title="user.username + ' is watching'"
:style="{'border': '1px solid ' + user.data.plugins.color}">
<img :src="user.data.plugins.avatar">
</div>
<!-- represents other users -->
<div v-if="(playerChannelUsers[channel.id] || []).length > 4"
:title="(playerChannelUsers[channel.id].length - 4) + 'others are watching'"
class="avatar"
>
<i class="material-icons md-14">more_horiz</i>
</div>
</div>
</div>
<div class="channel-content-users" v-if="playerChannelUsers[channel.id] && playerChannelUsers[channel.id].length > 0">
<!-- users in the channel -->
<div v-for="user of playerChannelUsers[channel.id]"
:key="user.username"
class="avatar image-bubble"
:title="user.username + ' is watching'"
:style="{'border': '1px solid ' + user.data.plugins.color}">
<img :src="user.data.plugins.avatar">
</div>
<!-- connected users -->
<div v-if="playerChannelUsers[channel.id] && playerChannelUsers[channel.id].length > 0"
class="channel-users mr-1"
title="Number of watchers">
<i class="material-icons md-14">{{playerChannelUsers[channel.id].length > 1 ? 'group' : 'person'}}</i>
<span>{{ playerChannelUsers[channel.id].length }}</span>
<div v-if="channel.currentMedia"
class="channel-content-detail">
<!-- show if there is a video currently playing -->
<div v-show="channel.playing"
class="channel-player"
:class="{ 'disabled': playerChannelId !== channel.id }"
:title="'Media added by ' + channel.currentMedia.owner">

<div class="channel-player-owner">{{ channel.currentMedia.title }}</div>
<i class="material-icons md-14">movie</i>
</div>
</div>
</div>
Expand All @@ -69,7 +72,7 @@
props: { },
methods: {
joinChannel: function(id) {
if (this.playerChannel === id) {
if (this.playerChannelId === id) {
this.$client.leavePlayerChannel();
} else {
this.$client.joinPlayerChannel(id);
Expand All @@ -86,7 +89,7 @@
...mapState('Main', [
'playerChannelUsers',
'playerChannels',
'playerChannel',
'playerChannelId',
'user',
'op',
]),
Expand Down Expand Up @@ -120,14 +123,16 @@
.channel {
min-height: 35px;
margin-top: 4px;
margin-top: 2px;
.channel-content {
display: flex;
flex-direction: column;
.channel-content-info {
display: flex;
height: 35px;
flex-basis: 35px;
.channel-icon {
flex-basis: 20px;
Expand All @@ -138,67 +143,69 @@
.channel-name {
flex-grow: 1;
margin-top: 10px;
margin-left: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.channel-meta {
flex-basis: 100px;
flex-basis: 105px;
margin-top: 10px;
padding-right: 10px;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
overflow: hidden;
.channel-player {
color: #ff8f8f;
.channel-player-owner {
vertical-align: top;
font-size: 11px;
max-width: 70px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
}
}
.channel-player.disabled {
color: #8c8c8c;
>.avatar {
min-width: 15px;
width: 15px;
height: 15px;
margin-right: 4px;
}
.channel-delete {
color: #ff8e8e;
margin-right: 3px;
}
}
}
.channel-content-users {
.channel-content-detail {
display: flex;
overflow: hidden;
justify-content: flex-end;
margin-bottom: 5px;
margin-left: 12px;
padding-right: 14px;
padding-left: 10px;
.channel-player {
color: #ff8f8f;
flex-grow: 1;
width: 0;
display: flex;
.channel-users {
color: #8ecfff;
margin-top: 3px;
margin-left: 6px;
white-space: nowrap;
text-align: right;
span { vertical-align: top; }
.channel-player-owner {
vertical-align: top;
font-size: 11px;
flex-grow: 1;
padding-right: 10px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
}
>.avatar {
min-width: 20px;
width: 20px;
height: 20px;
margin: 1px;
.channel-player.disabled {
color: #8c8c8c;
}
}
}
}
}
</style>
</style>
3 changes: 2 additions & 1 deletion app/client/src/vue/components/channel/TextChannelList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
</div>
<hover-card v-for="room in rooms"
:key="room.id"
:clickable="true"
:selected="currentRoom === room.id"
:highlighted="user.id > 0 && (user.data.plugins.lastseen[room.id] || 0) < room.lastReceivedMessageId && currentRoom !== room.id"
:border-color="'#afafaf'"
Expand Down Expand Up @@ -132,7 +133,7 @@
.room {
height: 35px;
margin-top: 4px;
margin-top: 2px;
.room-content {
display: flex;
Expand Down
Loading

0 comments on commit bd64039

Please sign in to comment.