Skip to content

Commit

Permalink
Minor changes
Browse files Browse the repository at this point in the history
* Prompt when session expires
* Design updates
* Delete old code
* Update changelog
  • Loading branch information
remixz committed Dec 8, 2017
1 parent 6e79205 commit f8b979f
Show file tree
Hide file tree
Showing 6 changed files with 66 additions and 43 deletions.
11 changes: 10 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,17 @@ export default {
},
async created () {
try {
await this.$store.dispatch('startSession')
if (
this.$route.name !== 'login' &&
Object.keys(this.$store.state.auth).length > 0 &&
(!this.$store.state.auth.token || !this.$store.state.auth.expires || new Date() > new Date(this.$store.state.auth.expires))
) {
await this.$store.dispatch('logout', true)
this.$router.replace(`/login?next=${encodeURIComponent(this.$route.fullPath)}`)
}
this.loaded = true
} catch (err) {
this.error = true
Expand Down
20 changes: 0 additions & 20 deletions src/lib/websocket.js

This file was deleted.

24 changes: 21 additions & 3 deletions src/pages/Changelog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,24 @@
<div>
<h1 class="fw4">Changelog</h1>

<h2 class="fw6 f4 flex items-center update-title">2017-12-07: Minor updates</h2>
<div class="lh-copy">
<ul class="changelog-list">
<li>
Umi will now prompt you if you need to sign in again due to your session expiring. A session might expire if you change your password, or if you don't use Umi for a little while.
<ul class="mv1">
<li>This fixes a bug where your queue and history data wouldn't load properly.</li>
</ul>
</li>
<li>
Minor design updates.
</li>
<li>
Happy holidays! <img src="https://cdn.frankerfacez.com/emoticon/108591/1" class="v-mid">
</li>
</ul>
</div>

<h2 class="fw6 f4 flex items-center update-title">2017-11-30: Rooms rewrite & more</h2>
<div class="lh-copy">
<ul class="changelog-list">
Expand All @@ -23,13 +41,13 @@
<span v-else>Install and refresh</span>
</div>
</div>
As a brief explanation of why this would happen: To make Umi even faster, the website caches a copy of all its code, so it doesn't even need to contact the Umi servers to run. Since the website doesn't contact the server when you first open it, the website has to check for updates after it's loaded. This is when you'd get the update notification.
As a brief explanation of why this would happen: To make Umi even faster, the website stores a copy of all its code on your device, so it doesn't need to contact the Umi servers to load. Since the website doesn't contact the server when you first open it, the website has to check for updates after it has loaded. This is when you'd get the update notification.
<div class="mb2"></div>
I set the old system up to continually check for updates, including while you're using the player. Part of this was because of the rooms system, as it was very fickle with people leaving, so I didn't want to make it so auto updated while in a room. Now that rooms are a lot more stable, Umi will just check for updates when you first open the site, and automatically refresh if there's an update. You'll get a notification that links you here for details on the updates.
I setup the old system to continually check for updates, including while you were using the player. Part of this was because of the old rooms system, as it was very fickle with people leaving, so I didn't want to make it so auto-update while you in a room. Now that rooms are a lot more stable, Umi will just check for updates when you first open the site, and automatically refresh if there's an update. You'll get a notification that links you here for details on the update.
</li>
<li>
<b class="fw6">What's next:</b>
I'm generally pretty happy with how Umi has progressed so far, and I hope you're enjoying using it. I do still have some ideas for the future, though! Here are some, in no particular planned order of adding them:
I'm generally pretty happy with how Umi has progressed so far, and I hope you're enjoying using it. I do still have some ideas for the future though! Here are some, in no particular order of adding them:
<ul class="mv1">
<li>
Spoilers mode (hides all thumbnails and episode titles)
Expand Down
23 changes: 17 additions & 6 deletions src/pages/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@
<h3 class="tc white fw5 mt0">Watch together online, sync to MyAnimeList, and more.</h3>
<form class="measure center bg-white shadow-2 br2 pa3" @submit.prevent="login">
<span class="dark-red mb2 dib" v-if="formError">{{ formError }}</span>
<legend class="f4 fw6 ph0 mt0 mb1">Sign in with Crunchyroll</legend>
<legend class="f4 fw6 ph0 mt0 mb1" v-if="!expiredSession">Sign in with Crunchyroll</legend>
<div class="pa3 bg-yellow br2 mb1 box-shadow-umi" v-if="expiredSession">
<i class="fa fa-info-circle" aria-hidden="true"></i> Your session expired. Please sign in again:
</div>
<fieldset class="ba b--transparent ph0 mh0 pb2">
<div>
<label class="db fw6 lh-copy f6 dark-gray" for="username">Username / Email</label>
Expand All @@ -20,9 +23,7 @@
<div>
<input class="fw6 ph3 pv2 input-reset ba b--black-20 bg-white bg-animate hover-bg-blue black hover-white br2 box-shadow-umi pointer f6 dib w-100" type="submit" :value="loading ? 'Signing in...' : 'Sign in'">
</div>
<small class="pt3 db">
<i class="fa fa-info-circle pr1" aria-hidden="true"></i> Your password is sent directly to Crunchyroll, and is never stored by Umi.
</small>
<small class="pt3 db">Your password is sent directly to Crunchyroll, and is never stored by Umi.</small>
</form>
</div>
<img class="absolute left-0 right-0 center umi-illustration" src="../assets/umi-login.png" alt="Illustration of the character Umi Sonoda">
Expand All @@ -37,12 +38,17 @@
},
data () {
return {
username: '',
username: this.$store.state.expiredSession || '',
password: '',
formError: '',
loading: false
}
},
computed: {
expiredSession () {
return this.$store.state.expiredSession
}
},
methods: {
async login () {
const {username, password, $store, $router, $route} = this
Expand All @@ -57,6 +63,11 @@
this.loading = false
}
}
},
mounted () {
if (this.expiredSession) {
this.$el.querySelector('input[name="password"]').focus()
}
}
}
</script>
Expand All @@ -73,7 +84,7 @@
0% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
Expand Down
9 changes: 4 additions & 5 deletions src/pages/Media.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<img :src="nextEpisodeMedia.screenshot_image.thumb_url" class="v-mid bg-dark-gray next-episode-image">
<div class="dib v-mid ml2">
Watch next episode: <br /> Episode {{nextEpisodeMedia.episode_number}} &mdash; {{nextEpisodeMedia.name}}
</div>
</div>
</div>
</router-link>
</div>
Expand All @@ -33,11 +33,10 @@
<div class="media-info">
<div>
<h2 class="normal lh-title mb2 w-80 dib">{{media.name}}</h2>
<div class="dib fr pt3 z-9999 relative">
<div v-tooltip.bottom-center="'Watch with others'" class="f5 fw6 dib ba bg-transparent br2 black pointer ph3 pv2 box-shadow-umi" :class="optionClasses" v-if="room === ''" @click="createRoom">
<div class="dib fr mt3 z-9999 relative box-shadow-umi br2 ba b--black-20">
<div v-tooltip.bottom-center="'Watch with others'" class="f8 fw6 dib bg-transparent black pointer ph3 pv2 br b--black-20" :class="optionClasses" v-if="room === ''" @click="createRoom">
<i class="tc fa fa-users w-1" aria-hidden="true"></i>
</div>
<div v-tooltip.bottom-center="'Toggle dark mode'" class="f5 fw6 dib ba bg-transparent br2 black pointer ph3 pv2 box-shadow-umi" :class="optionClasses" @click="$store.commit('UPDATE_LIGHTS', !lights)">
</div><div v-tooltip.bottom-center="'Toggle dark mode'" class="f8 fw6 dib bg-transparent black pointer ph3 pv2" :class="optionClasses" @click="$store.commit('UPDATE_LIGHTS', !lights)">
<i class="tc fa fa-moon-o w-1" aria-hidden="true"></i>
</div>
</div>
Expand Down
22 changes: 14 additions & 8 deletions src/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ const store = new Vuex.Store({
roomData: {},
connectedCount: 0,
lights: false,
updateAvailable: false,
error: false
error: false,
expiredSession: ''
},

actions: {
Expand Down Expand Up @@ -106,19 +106,25 @@ const store = new Vuex.Store({
expires: data.expires,
username: data.user.username
})
commit('SET_EXPIRED_SESSION', '')
resolve()
} catch (err) {
reject(err)
}
})
},

logout ({commit, dispatch}) {
logout ({commit, dispatch, state}, didExpire) {
return new Promise(async (resolve, reject) => {
try {
if (didExpire) {
commit('SET_EXPIRED_SESSION', state.auth.username)
}
commit('REMOVE_AUTH')
await dispatch('startSession')
resolve()
commit('SET_INITIAL_HISTORY', [])
commit('SET_QUEUE_DATA', [])
} catch (err) {
handleError(err, reject)
}
Expand Down Expand Up @@ -446,7 +452,7 @@ const store = new Vuex.Store({
commit('UPDATE_ROOM_DATA', snapshot.val())
})

commit('UPDATE_CONNECTED', true)
commit('UPDATE_CONNECTED', true)
usersRef.on('value', (snapshot) => {
if (snapshot.exists()) {
commit('UPDATE_CONNECTED_COUNT', Object.keys(snapshot.val()).length)
Expand Down Expand Up @@ -569,12 +575,12 @@ const store = new Vuex.Store({
state.lights = bool
},

SET_UPDATE_AVAILABLE (state) {
state.updateAvailable = true
},

SET_ERROR (state, bool) {
state.error = bool
},

SET_EXPIRED_SESSION (state, str) {
state.expiredSession = str
}
}
})
Expand Down

0 comments on commit f8b979f

Please sign in to comment.