Skip to content
This repository has been archived by the owner on Nov 5, 2023. It is now read-only.

Commit

Permalink
Add ability to sign in and save settings. Add terms of service page.
Browse files Browse the repository at this point in the history
  • Loading branch information
curtgrimes committed Apr 26, 2019
1 parent 09f0c49 commit 28db2c8
Show file tree
Hide file tree
Showing 19 changed files with 1,704 additions and 400 deletions.
7 changes: 7 additions & 0 deletions app/.env.sample
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,11 @@ DISABLE_SSL_REDIRECT=true

REDIS_URL=//localhost:6379

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=

ADMIN_TOKEN=
1 change: 1 addition & 0 deletions app/assets/scss/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ $modal-content-box-shadow-xs: $modal-content-box-shadow-sm-up;
@import '~bootstrap/scss/_breadcrumb.scss';
@import '~bootstrap/scss/_pagination.scss';
@import '~bootstrap/scss/_badge.scss';
@import '~bootstrap/scss/_toasts.scss';
//@import "~bootstrap/scss/_jumbotron.scss";
@import '~bootstrap/scss/_alert.scss';
@import '~bootstrap/scss/_progress.scss';
Expand Down
2 changes: 1 addition & 1 deletion app/components/CastButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export default {
// Restore settings and current transcript
self.sendMessage({
action: 'RESTORE_SETTINGS',
action: 'RESTORE_SETTINGS_OBJECT',
payload: {
settings: self.$store.state.settings,
},
Expand Down
143 changes: 115 additions & 28 deletions app/components/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,6 @@
<span v-else>{{$t('navbar.captioner.stopCaptioning')}}</span>
<kbd v-show="largerLayout" class="small ml-3">c</kbd>
</div>

<!-- <b-popover
id="captioningPreviewPopover"
target="startCaptioningDropdown"
placement="top"
>
{{transcriptExcerpt}}
</b-popover>-->
</b-btn>
<b-btn
v-show="experiments.includes('typingMode') && !typingModeOn"
Expand All @@ -110,10 +102,9 @@
<b-popover
target="navbar-settings-button"
placement="top"
:show.sync="showMenu"
:show.sync="showSettingsMenu"
triggers="click blur"
boundary="viewport"
title
>
<b-btn-group vertical class="d-flex">
<b-btn
Expand Down Expand Up @@ -185,26 +176,109 @@
{{$t('navbar.menu.settings')}}
</b-btn>
</b-popover>
<b-tooltip target="navbar-settings-button" :title="$t('navbar.menu.menu')"></b-tooltip>
<b-btn
id="navbar-settings-button"
@click="showMenu = !showMenu"
@click="showSettingsMenu = !showSettingsMenu"
v-b-tooltip.top
:variant="captioningToggleButtonVariant"
:title="$t('navbar.menu.menu')"
>
<fa icon="bars"/>
</b-btn>
</b-btn-group>
<b-popover
target="navbar-profile-button-logged-in"
placement="top"
:show.sync="showProfileMenu"
triggers="click blur"
boundary="viewport"
title
>
<div style="min-width:300px">
<img
:src="$store.state.user.photoURL"
v-if="$store.state.user.photoURL"
class="rounded-circle float-left p-1 pr-2"
style="max-width:50px"
>
<fa v-else icon="user-circle" class="rounded-circle float-left p-1 pr-2 text-muted"/>

<div class="pt-1" style="line-height:1.25rem">
<span class="text-muted">
Signed in
<span v-if="$store.state.user.email || $store.state.user.displayName">as</span>
</span>
<div
v-if="$store.state.user.email || $store.state.user.displayName"
>{{$store.state.user.email || $store.state.user.displayName}}</div>
</div>
<div class="clearfix"></div>
<hr>
<b-btn variant="link" class="d-block" @click="signOut()">Sign out</b-btn>
</div>
</b-popover>

<!-- if logged in -->
<b-tooltip target="navbar-profile-button-logged-in" title="Profile"></b-tooltip>
<b-btn
id="navbar-profile-button-logged-in"
v-show="$store.state.user.signedIn"
@click="showProfileMenu = !showProfileMenu"
v-b-tooltip.top
class="ml-2 text-white px-2 profile-button"
style="position:relative"
variant="link"
>
<transition name="fade">
<img
:src="$store.state.user.photoURL"
v-if="$store.state.user.photoURL"
class="rounded-circle"
style="max-width: 30px;position: absolute;margin-left: -2px;margin-top: -2px;"
>
</transition>
<fa icon="user-circle"/>
</b-btn>

<!-- not logged in -->
<b-tooltip target="navbar-profile-button-logged-out" title="Sign in or sign up"></b-tooltip>
<b-btn
id="navbar-profile-button-logged-out"
v-show="!$store.state.user.signedIn && experiments.includes('signin')"
v-b-tooltip.top
class="ml-2 text-white px-2 profile-button"
variant="link"
:to="localePath('captioner-sign-in')"
>
<fa icon="user-circle"/>
</b-btn>
</div>
</nav>
</div>
</template>

<style>
.firebaseui-title {
text-align: center !important;
}
</style>


<style scoped>
.button-only-disabled > .btn-primary:first-child {
opacity: 0.6;
cursor: default;
}
.profile-button {
font-size: 1.5rem;
line-height: 1.5rem;
opacity: 0.7;
}
.profile-button:hover,
.profile-button:active,
.profile-button:focus {
opacity: 1;
}
</style>


Expand All @@ -217,7 +291,8 @@ import saveToFile from '~/mixins/saveToFile';
import dateFormat from '~/mixins/dateFormat';
import bBtn from 'bootstrap-vue/es/components/button/button';
import bBtnGroup from 'bootstrap-vue/es/components/button-group/button-group';
import bTooltip from 'bootstrap-vue/es/directives/tooltip/tooltip';
import bTooltipDirective from 'bootstrap-vue/es/directives/tooltip/tooltip';
import bTooltipComponent from 'bootstrap-vue/es/components/tooltip/tooltip';
import bPopover from 'bootstrap-vue/es/components/popover/popover';
export default {
Expand All @@ -229,14 +304,16 @@ export default {
bBtn,
bBtnGroup,
bPopover,
bTooltip: bTooltipComponent,
},
directives: {
bTooltip,
bTooltip: bTooltipDirective,
},
data: function() {
return {
vmixNotFullySetUpMessageDismissed: false,
showMenu: false,
showSettingsMenu: false,
showProfileMenu: false,
};
},
computed: {
Expand Down Expand Up @@ -299,22 +376,31 @@ export default {
},
},
watch: {
showMenu: function() {
// Hide all tooltips
this.$root.$emit('bv::hide::tooltip');
showProfileMenu: function() {
this.hideAllTooltips();
},
showSettingsMenu: function() {
this.hideAllTooltips();
},
// transcriptExcerpt: function(transcriptExcerpt) {
// if (this.$router.currentRoute.name.startsWith('captioner-settings')) {
// if (transcriptExcerpt) {
// this.$root.$emit('bv::show::popover', 'startCaptioningDropdown');
// }
// else {
// this.$root.$emit('bv::hide::popover', 'startCaptioningDropdown');
// }
// }
// },
},
methods: {
hideAllTooltips: function() {
this.$root.$emit('bv::hide::tooltip');
},
signOut: function() {
this.showProfileMenu = false;
setTimeout(() => {
this.$firebase
.auth()
.signOut()
.then(() => {
// Success signing out
// INIT_CHECK_AUTH_STATUS_WATCHER handles
// updating the store and removing the user
this.$store.commit('SHOW_TOAST', { toastName: 'signedOut' });
});
}, 350); // let popover fade out first to get around positioning issue on close
},
captioningToggleButtonClick: function() {
if (this.captioningOn) {
this.stopCaptioning();
Expand All @@ -324,6 +410,7 @@ export default {
},
startCaptioning: function() {
this.$store.dispatch('captioner/startManual');
this.$router.push('/captioner');
},
stopCaptioning: function() {
this.$store.dispatch('captioner/stopManual');
Expand Down
2 changes: 1 addition & 1 deletion app/components/Transcript.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<fa icon="chevron-down" class="backToLatestIcon mr-2"/>Back to Latest
</b-btn>
</transition>
<font-stylesheet v-if="$store.state.settings.loaded" v-model="fontFamily"/>
<font-stylesheet v-if="$store.state.settingsLoaded" v-model="fontFamily"/>
</div>
</template>

Expand Down
107 changes: 67 additions & 40 deletions app/mixins/ChromelessWindowManager.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,73 @@
function commitToWindow(windowInstance, type, payload) {
windowInstance.dispatchEvent(new CustomEvent('processVuexMutation', {detail: {type, payload}}));
windowInstance.dispatchEvent(new CustomEvent('processVuexMutation', {
detail: {
type,
payload
}
}));
}

function actionToWindow(windowInstance, type, payload) {
windowInstance.dispatchEvent(new CustomEvent('processVuexAction', {detail: {type, payload}}));
windowInstance.dispatchEvent(new CustomEvent('processVuexAction', {
detail: {
type,
payload
}
}));
}

export default {
methods: {
start(RemoteEventBus, {settings, transcriptInterim, transcriptFinal, transcriptTyped}, onClose) {
let chromelessWindow = window.open('/receivers/chromeless', 'WebCaptionerChild', 'height=700,width=900,toolbar=0,location=0,menubar=0');

if (!chromelessWindow) {
alert('Unable to open a new window.');
return;
}

RemoteEventBus.$on('sendMutationToReceivers', ({mutation, payload}) => {
commitToWindow(chromelessWindow, mutation, payload);
});

function restoreSettings() {
actionToWindow(chromelessWindow, 'RESTORE_SETTINGS', { settings });
commitToWindow(chromelessWindow, 'captioner/SET_TRANSCRIPT_INTERIM', { transcriptInterim });
commitToWindow(chromelessWindow, 'captioner/SET_TRANSCRIPT_FINAL', { transcriptFinal });
commitToWindow(chromelessWindow, 'captioner/SET_TRANSCRIPT_TYPED', { transcriptTyped });

// Only do it once for this window
window.removeEventListener('receiverIsReadyToReceiveMutations', restoreSettings);
}
window.addEventListener('receiverIsReadyToReceiveMutations', restoreSettings);

// I wanted to check for the unload event here, but it also fires on reload
// and the load event didn't fire reliably when refreshing. So for now this interval
// seemed more reliable.
let checkOpenInterval;

checkOpenInterval = setInterval(function(){
if (!chromelessWindow || chromelessWindow.closed) {
onClose();
clearInterval(checkOpenInterval);
}
},500);
},
}
}
methods: {
start(RemoteEventBus, {
settings,
transcriptInterim,
transcriptFinal,
transcriptTyped
}, onClose) {
let chromelessWindow = window.open('/receivers/chromeless', 'WebCaptionerChild', 'height=700,width=900,toolbar=0,location=0,menubar=0');

if (!chromelessWindow) {
alert('Unable to open a new window.');
return;
}

RemoteEventBus.$on('sendMutationToReceivers', ({
mutation,
payload
}) => {
commitToWindow(chromelessWindow, mutation, payload);
});

function restoreSettings() {
actionToWindow(chromelessWindow, 'RESTORE_SETTINGS_OBJECT', {
settings
});
commitToWindow(chromelessWindow, 'captioner/SET_TRANSCRIPT_INTERIM', {
transcriptInterim
});
commitToWindow(chromelessWindow, 'captioner/SET_TRANSCRIPT_FINAL', {
transcriptFinal
});
commitToWindow(chromelessWindow, 'captioner/SET_TRANSCRIPT_TYPED', {
transcriptTyped
});

// Only do it once for this window
window.removeEventListener('receiverIsReadyToReceiveMutations', restoreSettings);
}
window.addEventListener('receiverIsReadyToReceiveMutations', restoreSettings);

// I wanted to check for the unload event here, but it also fires on reload
// and the load event didn't fire reliably when refreshing. So for now this interval
// seemed more reliable.
let checkOpenInterval;

checkOpenInterval = setInterval(function () {
if (!chromelessWindow || chromelessWindow.closed) {
onClose();
clearInterval(checkOpenInterval);
}
}, 500);
},
}
}
Loading

0 comments on commit 28db2c8

Please sign in to comment.