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

Commit

Permalink
Add experiments page
Browse files Browse the repository at this point in the history
  • Loading branch information
curtgrimes committed Jun 23, 2018
1 parent 4a0ff15 commit 51419d1
Show file tree
Hide file tree
Showing 9 changed files with 143 additions and 11 deletions.
3 changes: 3 additions & 0 deletions app/src/App.vue
Expand Up @@ -65,6 +65,9 @@ export default {
.bind(['ctrl+shift+,', 'command+shift+,'], function() {
self.$store.commit('TEXT_SIZE_DECREASE');
})
.bind(['e x p e r i m e n t s !'], function() {
self.$router.push('/captioner/settings/experiments');
})
// Larger layout mode
Expand Down
12 changes: 6 additions & 6 deletions app/src/app.js
Expand Up @@ -12,13 +12,13 @@ import RavenVue from 'raven-js/plugins/vue';
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { faFileAlt, faFileWord, faExclamationTriangle, faTimes, faMicrophone, faDesktop, faExternalLinkAlt, faSave, faTrashAlt, faCog, faCheckCircle, faSpinner, faChevronRight, faMinusCircle, faPlusCircle, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
import { faFileAlt, faFileWord, faExclamationTriangle, faTimes, faMicrophone, faDesktop, faExternalLinkAlt, faSave, faTrashAlt, faCog, faCheckCircle, faSpinner, faChevronRight, faMinusCircle, faPlusCircle, faArrowLeft, faFlask } from '@fortawesome/free-solid-svg-icons'

import { faThumbsUp } from '@fortawesome/free-regular-svg-icons'

import { faApple, faWindows, faAndroid, faChrome } from '@fortawesome/fontawesome-free-brands'

library.add(faFileAlt, faThumbsUp, faFileWord, faExclamationTriangle, faTimes, faMicrophone, faDesktop, faApple, faWindows, faAndroid, faExternalLinkAlt, faSave, faTrashAlt, faCog, faCheckCircle, faSpinner, faChrome,faChevronRight, faMinusCircle, faPlusCircle, faArrowLeft)
library.add(faFileAlt, faThumbsUp, faFileWord, faExclamationTriangle, faTimes, faMicrophone, faDesktop, faApple, faWindows, faAndroid, faExternalLinkAlt, faSave, faTrashAlt, faCog, faCheckCircle, faSpinner, faChrome,faChevronRight, faMinusCircle, faPlusCircle, faArrowLeft, faFlask)

Vue.component('fa', {
functional: true,
Expand All @@ -34,10 +34,10 @@ Vue.component('fa', {
}
})

Raven
.config('REMOVED')
.addPlugin(RavenVue, Vue)
.install();
// Raven
// .config('REMOVED')
// .addPlugin(RavenVue, Vue)
// .install();

const dateFormatPlugin = {
install () {
Expand Down
8 changes: 8 additions & 0 deletions app/src/router/index.js
Expand Up @@ -17,6 +17,7 @@ const SettingsWordReplacementsView = () => import('../views/settings/SettingsWor
const SettingsCensorView = () => import('../views/settings/SettingsCensorView.vue')
const SettingsControlsView = () => import('../views/settings/SettingsControlsView.vue')
const SettingsVmixView = () => import('../views/settings/SettingsVmixView.vue')
const SettingsExperimentsView = () => import('../views/settings/SettingsExperimentsView.vue')
const SettingsRemoteDisplaysView = () => import('../views/settings/SettingsRemoteDisplaysView.vue')
const CaptionerView = () => import('../views/CaptionerView.vue')
const Transcript = () => import('../components/Transcript.vue')
Expand Down Expand Up @@ -98,6 +99,13 @@ export function createRouter () {
navbarTitle: 'Connect to vMix',
},
},
{
path: 'experiments',
component: SettingsExperimentsView,
meta: {
navbarTitle: 'Experiments',
},
},
]
},
]
Expand Down
4 changes: 4 additions & 0 deletions app/src/store/actions.js
Expand Up @@ -73,6 +73,10 @@ export default {

commit('SET_ROOM_MEMBERSHIP_ID', { roomMembershipId: get(settings, 'roomMembershipId') });

get(settings, 'exp').forEach((experiment) => {
commit('ADD_EXPERIMENT', { experiment });
});

const wordReplacements = get(settings, 'wordReplacements');
for (let i = 0; i < wordReplacements.length; i++) {
commit('ADD_WORD_REPLACEMENT', { wordReplacement: wordReplacements[i] });
Expand Down
1 change: 1 addition & 0 deletions app/src/store/index.js
Expand Up @@ -86,6 +86,7 @@ export function createStore () {
webControllerAddress: '',
},
},
exp: [],
},
receivers: {
chromecast: {
Expand Down
11 changes: 11 additions & 0 deletions app/src/store/mutations.js
Expand Up @@ -132,6 +132,17 @@ export default {
state.detached = false;
},

ADD_EXPERIMENT: (state, { experiment }) => {
if (!state.settings.exp.includes(experiment)) {
state.settings.exp.push(experiment);
}
},

REMOVE_EXPERIMENT: (state, { experiment }) => {
state.settings.exp = state.settings.exp.filter((e) => {
return e != experiment;
});
},


SOCKET_ONOPEN (state, event) {
Expand Down
2 changes: 1 addition & 1 deletion app/src/views/CaptionerView.vue
Expand Up @@ -47,7 +47,7 @@ export default {
this.initRoom();
}
this.$refs.welcomeModal.showModal();
// this.$refs.welcomeModal.showModal();
if (this.vmixOn) {
this.$store.dispatch('REFRESH_VMIX_SETUP_STATUS')
Expand Down
26 changes: 22 additions & 4 deletions app/src/views/SettingsView.vue
@@ -1,7 +1,6 @@
<template>
<div class="settings-view" :style="{height}" style="overflow:auto">
<router-link to="/captioner" class="btn btn-light d-none d-sm-block position-fixed py-md-3 px-3 px-md-4" style="z-index:2;right:0;top:0" role="tab" active-class=""><fa icon="times" size="2x" /></router-link>

<!-- xs navbar -->
<nav class="d-sm-none navbar sticky-top navbar-light bg-primary pr-2" :class="{'pl-2': showBackButton}">
<div class="mr-auto">
Expand All @@ -26,8 +25,9 @@
<b-list-group-item to="/captioner/settings/appearance">Appearance</b-list-group-item>
<b-list-group-item to="/captioner/settings/censor">Censor</b-list-group-item>
<b-list-group-item to="/captioner/settings/controls">Controls</b-list-group-item>
<b-list-group-item v-show="experiments['experiments']" to="/captioner/settings/experiments">Experiments</b-list-group-item>
<b-list-group-item to="/captioner/settings/language">Language</b-list-group-item>
<b-list-group-item to="/captioner/settings/remote-displays">Remote Displays</b-list-group-item>
<b-list-group-item v-show="experiments['remoteDisplays']" to="/captioner/settings/remote-displays">Remote Displays</b-list-group-item>
<b-list-group-item to="/captioner/settings/word-replacements">Word Replacements</b-list-group-item>
<!-- <b-list-group-item to="/captioner/settings/title-cards">Title Cards</b-list-group-item> -->
</b-list-group>
Expand All @@ -46,14 +46,15 @@
<nav>
<b-nav vertical pills>
<b-nav-item to="/captioner/settings/about">About</b-nav-item>
<b-nav-item class="nav-item-rainbow" v-if="experiments.includes('science')" to="/captioner/settings/experiments"><fa icon="flask" /> Experiments</b-nav-item>
</b-nav>
<hr/>
<b-nav vertical pills>
<b-nav-item to="/captioner/settings/appearance">Appearance</b-nav-item>
<b-nav-item to="/captioner/settings/censor">Censor</b-nav-item>
<b-nav-item to="/captioner/settings/controls">Controls</b-nav-item>
<b-nav-item to="/captioner/settings/language">Language</b-nav-item>
<b-nav-item to="/captioner/settings/remote-displays">Remote Displays</b-nav-item>
<b-nav-item v-if="experiments.includes('remoteDisplays')" to="/captioner/settings/remote-displays">Remote Displays</b-nav-item>
<b-nav-item to="/captioner/settings/word-replacements">Word Replacements</b-nav-item>
<!-- <b-nav-item to="/captioner/settings/title-cards">Title Cards</b-nav-item> -->
</b-nav>
Expand All @@ -80,6 +81,21 @@
</div>
</template>

<style scoped>
.nav-item-rainbow .nav-link.active {
animation: rainbow 10s infinite alternate;
}
@keyframes rainbow {
0% {background-color: hsl(0, 50%, 50%);}
20% {background-color: hsl(50, 50%, 50%);}
40% {background-color: hsl(100, 50%, 50%);}
60% {background-color: hsl(150, 50%, 50%);}
80% {background-color: hsl(200, 50%, 50%);}
100% {background-color: hsl(255, 50%, 50%);}
}
</style>


<script>
import Combokeys from 'combokeys'
import appHeightAdjuster from '../util/appHeightAdjuster'
Expand Down Expand Up @@ -113,12 +129,14 @@ export default {
this.$watch('largerLayout', function() {
this.height = appHeightAdjuster();
});
},
beforeDestroy: function() {
this.escShortcut.detach();
},
computed: {
experiments: function() {
return this.$store.state.settings.exp;
},
showBackButton: function() {
return this.$route.path !== '/captioner/settings';
},
Expand Down
87 changes: 87 additions & 0 deletions app/src/views/settings/SettingsExperimentsView.vue
@@ -0,0 +1,87 @@
<template>
<div class="settings-experiments-view">
<p>Be sure to help out and give me feedback about experiments! Email me at <a href="mailto:github@curtgrimes.com">github@curtgrimes.com</a> or <a href="https://m.me/webcaptioner">message me on Facebook</a>.</p>
<b-modal ref="invalidExperiment" class="text-center" hide-header @shown="focusInvalidExperimentModalOkButton()">
<div style="font-size:7rem" class="p-0">&#129300;</div>
<div slot="modal-footer">
<b-btn class="float-right" variant="secondary" ref="invalidExperimentModalOkButton" @click="hideInvalidExperimentModal()">Ok</b-btn>
</div>
</b-modal>
<b-input-group size="lg" class="mb-4">
<b-form-input @keydown.enter.native="addExperiment" v-model="experimentName" autofocus placeholder="Experiment Name"></b-form-input>
<b-input-group-append>
<b-btn @click="addExperiment()">Add</b-btn>
</b-input-group-append>
</b-input-group>
<div v-if="experiments.length">
<h4>Added Experiments</h4>
<b-list-group class="mb-4">
<b-list-group-item v-for="experiment in experiments" :key="experiment">
<div class="row">
<div class="col-8">
<p class="mb-0"><strong>{{experiment}}</strong></p>
<p class="small mb-0">{{getDescription(experiment)}}</p>
</div>
<div class="col-4 pr-2">
<b-btn class="float-right" variant="danger" size="sm" @click="removeExperiment(experiment)">Remove</b-btn>
</div>
</div>
</b-list-group-item>
</b-list-group>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Y2VNxmn0lNA?rel=0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</template>

<script>
export default {
name: 'settings-experiments-view',
data: function() {
return {
experimentName: '',
};
},
computed: {
experiments: function() {
return this.$store.state.settings.exp;
},
},
methods: {
hideInvalidExperimentModal: function() {
this.$refs.invalidExperiment.hide();
},
getDescription: function(experiment) {
switch(experiment) {
case 'science':
return 'Add a persistent "Experiments" menu item to settings for easy access.';
case 'remoteDisplays':
return 'Send captions to other phones or tablets.';
default:
return '';
}
},
isValidExperiment: function() {
return ['remoteDisplays','science'].includes(this.experimentName);
},
addExperiment: function() {
if (this.isValidExperiment()) {
this.$store.commit('ADD_EXPERIMENT', {experiment: this.experimentName});
this.experimentName = '';
}
else {
this.$refs.invalidExperiment.show();
}
},
focusInvalidExperimentModalOkButton: function() {
this.$refs.invalidExperimentModalOkButton.focus();
},
removeExperiment: function(experimentName) {
this.$store.commit('REMOVE_EXPERIMENT', {experiment: experimentName});
},
},
}
</script>

0 comments on commit 51419d1

Please sign in to comment.