Rooba
/
synclounge
mirror of https://github.com/synclounge/synclounge.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cleaned up recentRooms logic and storage

This commit is contained in:
Travis Shivers 2020-05-24 19:31:33 -05:00
parent 65469a5786
commit be9acc2f29
4 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/application/joinroom.vue
View File

@ -30,13 +30,13 @@
<v-flex
xs12
class="nicelist pa-4"
v-if="!context.getters.getConnected && recents && Object.keys(recents).length > 0"
v-if="!context.getters.getConnected && this.recentRooms.length > 0"
style="color:white !important;"
>
<v-subheader>Recent Rooms</v-subheader>
<v-list class="pa-0">
<template v-for="(item, index) in recentsSorted">
<v-list-tile :key="index" v-if="index < 5" avatar @click="recentConnect(item)">
<template v-for="(item, index) in this.recentRooms.slice(0, 3)">
<v-list-tile :key="index" avatar @click="recentConnect(item)">
<v-list-tile-avatar>
<img :src="logos.light.small" style="width: 32px; height: auto" />
</v-list-tile-avatar>
@ -53,7 +53,7 @@
color="white"
dark
slot="activator"
@click.stop="removeHistoryItem(item)"
@click.stop="REMOVE_RECENT_ROOM(item)"
>close</v-icon>Remove
</v-tooltip>
</v-list-tile-action>
@ -211,7 +211,7 @@
import Vue from 'vue';
import axios from 'axios';
import { mapGetters, mapMutations } from 'vuex';
import { mapGetters, mapMutations, mapActions } from 'vuex';
export default {
props: ['object'],
@ -251,21 +251,14 @@ export default {
if (this.slRoom && this.slConnected && this.slServer) {
this.$router.push('/browse');
}
this.getRecents();
},
methods: {
...mapMutations('settings', [
'SET_CUSTOM_SERVER_USER_INPUTTED_URL'
]),
getRecents() {
this.recents = JSON.parse(window.localStorage.getItem('recentrooms'));
},
removeHistoryItem(item) {
const recents = JSON.parse(window.localStorage.getItem('recentrooms'));
delete recents[`${item.server}/${item.room}`];
window.localStorage.setItem('recentrooms', JSON.stringify(recents));
return this.getRecents();
},
...mapActions('settings', [
'REMOVE_RECENT_ROOM'
]),
connectionQualityClass(value) {
if (value < 50) {
return ['green--text', 'text--lighten-1'];
@ -419,7 +412,8 @@ export default {
computed: {
...mapGetters({
'syncloungeServers': 'GET_SYNCLOUNGE_SERVERS',
'GET_CUSTOM_SERVER_USER_INPUTTED_URL': 'settings/GET_CUSTOM_SERVER_USER_INPUTTED_URL'
'GET_CUSTOM_SERVER_USER_INPUTTED_URL': 'settings/GET_CUSTOM_SERVER_USER_INPUTTED_URL',
'recentRooms': 'settings/GET_RECENT_ROOMS'
}),
plex() {
return this.$store.state.plex;
@ -429,22 +423,10 @@ export default {
},
context() {
return this.$store;
},
recentsSorted() {
if (!this.recents) {
return [];
}
let arr = [];
for (const i in this.recents) {
const item = this.recents[i];
arr.push(item);
}
arr = arr.sort((a, b) => b.time - a.time);
if (arr.length > 3) {
return arr.slice(0, 3);
}
return arr;
}
},
mounted() {
console.log(this.recentRooms)
}
};
</script>

2
src/store.js
View File

@ -217,8 +217,6 @@ const actions = {
// Playing something different!
const server = state.plex.servers[mediaContainer.machineIdentifier];
commit('settings/SET_LASTSERVER', mediaContainer.machineIdentifier);
// state.settings.LASTSERVER = mediaContainer.machineIdentifier;
// window.localStorage.setItem('LASTSERVER', mediaContainer.machineIdentifier);
if (!server) {
return;
}

28
src/store/modules/settings/settings.store.js
View File

@ -26,6 +26,7 @@ const state = () => ({
CLIENTIDENTIFIER: `${generateGuid()}-${generateGuid()}`,
lastServer: null,
plexAuthToken: null,
recentRooms: [],
});
// Use stored value if not null, othewise fallback to config, then default values
@ -78,6 +79,7 @@ const getters = {
GET_LASTSERVER: state => state.lastServer,
GET_CUSTOM_SERVER_USER_INPUTTED_URL: state => state.customServerUserInputtedUrl,
GET_PLEX_AUTH_TOKEN: state => state.plexAuthToken,
GET_RECENT_ROOMS: state => state.recentRooms,
};
const mutations = {
@ -94,6 +96,31 @@ const mutations = {
SET_LASTSERVER: (state, server) => (state.lastServer = server),
SET_SLPLAYERVOLUME: (state, volume) => (state.slPlayerVolume = volume),
SET_PLEX_AUTH_TOKEN: (state, token) => (state.plexAuthToken = token),
SET_RECENT_ROOMS: (state, rooms) => (state.recentRooms = rooms),
};
const actions = {
ADD_RECENT_ROOM: ({ commit, getters }, newRoom) => {
console.log('first filter');
const lol = Array.of(newRoom).concat(getters.GET_RECENT_ROOMS.filter((room) => {
console.log(`${room.server} !== ${newRoom.server}: ${room.server !== newRoom.server}`);
console.log(`${room.room} !== ${newRoom.room}: ${room.room !== newRoom.room}`);
console.log(`${room.server !== newRoom.server && room.room !== newRoom.room}`);
return room.server !== newRoom.server || room.room !== newRoom.room;
}));
console.log('new rooms');
console.log(lol);
commit(
'SET_RECENT_ROOMS',
Array.of(newRoom).concat(getters.GET_RECENT_ROOMS.filter(room => room.server !== newRoom.server || room.room !== newRoom.room)),
);
},
REMOVE_RECENT_ROOM: ({ commit, getters }, roomToRemove) =>
commit(
'SET_RECENT_ROOMS',
getters.GET_RECENT_ROOMS.filter(room => room.server !== roomToRemove.server || room.room !== roomToRemove.room),
),
};
export default {
@ -101,4 +128,5 @@ export default {
state,
mutations,
getters,
actions,
};

49
src/store/modules/synclounge.js
View File

@ -1,6 +1,7 @@
import Vue from 'vue';
import axios from 'axios';
import moment from 'moment';
const EventEmitter = require('events');
function sendNotification(message) {
@ -82,7 +83,7 @@ export default {
actions: {
async autoJoin({
state, commit, rootState, dispatch
state, commit, rootState, dispatch,
}, data) {
await dispatch('socketConnect', {
address: data.server,
@ -141,7 +142,9 @@ export default {
});
});
},
joinRoom({ state, commit, rootState, rootGetters }, data) {
joinRoom({
state, commit, dispatch, rootState, rootGetters,
}, data) {
return new Promise(async (resolve, reject) => {
if (!state._socket || !state.connected) {
throw new Error('Not connected to a server!');
@ -155,7 +158,7 @@ export default {
let username = data.user.username;
if (rootGetters['settings/GET_HIDEUSERNAME']) {
username = rootGetters['settings/GET_ALTUSERNAME']
username = rootGetters['settings/GET_ALTUSERNAME'];
}
state._socket.emit(
'join',
@ -174,22 +177,20 @@ export default {
sendNotification(`Joined room: ${_data.room}`);
// Add this item to our recently-connected list
let recents = window.localStorage.getItem('recentrooms');
if (!recents) {
recents = {};
} else {
recents = JSON.parse(recents);
}
recents[`${state.server}/${state.room}`] = {
server: state.server,
room: state.room,
password: state.password,
time: new Date().getTime(),
};
window.localStorage.setItem('recentrooms', JSON.stringify(recents));
dispatch(
'settings/ADD_RECENT_ROOM',
{
server: state.server,
room: state.room,
password: state.password,
time: new Date().getTime(),
},
{ root: true },
);
// Generate our short url/invite link
let urlOrigin = window.location.origin + (rootGetters['config/GET_CONFIG'].webroot || '');
let urlOrigin =
window.location.origin + (rootGetters['config/GET_CONFIG'].webroot || '');
if (process.env.NODE_ENV === 'development') {
urlOrigin = 'http://app.synclounge.tv';
}
@ -301,8 +302,9 @@ export default {
}
// Check if we need to autoplay
if (
(ourTimeline.state === 'stopped' || !ourTimeline.state) &&
hostTimeline.playerState !== 'stopped' || rootState.rawTitle !== hostTimeline.rawTitle
((ourTimeline.state === 'stopped' || !ourTimeline.state) &&
hostTimeline.playerState !== 'stopped') ||
rootState.rawTitle !== hostTimeline.rawTitle
) {
if (rootState.blockAutoPlay || !hostTimeline.rawTitle) {
return resolve();
@ -332,7 +334,9 @@ export default {
.catch(async (e) => {
const hostServer = rootState.plex.servers[hostTimeline.machineIdentifier];
if (hostServer && hostTimeline.key) {
if (!rootGetters['settings/GET_BLOCKEDSERVERS'].includes(hostTimeline.machineIdentifier)) {
if (
!rootGetters['settings/GET_BLOCKEDSERVERS'].includes(hostTimeline.machineIdentifier)
) {
try {
await rootState.chosenClient.playMedia({
ratingKey: hostTimeline.key,
@ -344,12 +348,12 @@ export default {
rootState.blockAutoPlay = false;
}, 15000);
return resolve();
} catch (e) { }
} catch (e) {}
}
}
sendNotification(`Failed to find a compatible copy of ${
hostTimeline.rawTitle
}. If you have access to the content try manually playing it.`);
}. If you have access to the content try manually playing it.`);
setTimeout(() => {
rootState.blockAutoPlay = false;
}, 15000);
@ -541,6 +545,5 @@ export default {
});
}
},
getServerList() { },
},
};