-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #41 from haystack/develop
add audio support for comment
- Loading branch information
Showing
9 changed files
with
354 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,20 +25,6 @@ import axios from 'axios' | |
| import VueJwtDecode from "vue-jwt-decode"; | ||
| import io from "socket.io-client"; | ||
| import { Environments } from './environments' | ||
| // import * as Sentry from "@sentry/vue"; | ||
| // import { Integrations } from "@sentry/tracing"; | ||
|
|
||
| //prodcution log | ||
| // Sentry.init({ | ||
| // Vue, | ||
| // dsn: "https://[email protected]/5722075", | ||
| // integrations: [new Integrations.BrowserTracing()], | ||
|
|
||
| // // Set tracesSampleRate to 1.0 to capture 100% | ||
| // // of transactions for performance monitoring. | ||
| // // We recommend adjusting this value in production | ||
| // tracesSampleRate: 1.0, | ||
| // }); | ||
|
|
||
| const currentEnv = Environments.dev | ||
|
|
||
|
|
@@ -51,6 +37,7 @@ library.add(fas, far, faChevronDown, faChevronUp) | |
| const socket = io(currentEnv.baseURL, { reconnect: true }) | ||
| axios.defaults.baseURL = `${currentEnv.baseURL}/` | ||
| export const PLUGIN_HOST_URL = currentEnv.pluginURL | ||
| export const BASE_HOST_URL = currentEnv.baseURL | ||
| axios.defaults.withCredentials = true | ||
|
|
||
| if ((document.attachEvent && document.readyState === 'complete') || (!document.attachEvent && document.readyState !== 'loading')) { | ||
|
|
@@ -333,6 +320,7 @@ function embedNbApp() { | |
| filterMaxThreadsConfig: null, | ||
| isShowSpotlightControls: false, | ||
| syncNotificationPopupTimerConfig: 60000, | ||
| isCommentMediaAudio: false, | ||
| }, | ||
| syncConfig: false, | ||
| isDragging: false, // indicates if there's a dragging happening in the UI | ||
|
|
@@ -501,7 +489,6 @@ function embedNbApp() { | |
| return false | ||
| }) | ||
|
|
||
| console.log(myHiddenItems); | ||
| sortedItems = sortedItems.slice(0, maxThreads) | ||
| sortedItems = sortedItems.concat(myHiddenItems) | ||
| } | ||
|
|
@@ -576,6 +563,7 @@ function embedNbApp() { | |
| this.currentConfigs.filterMaxThreadsConfig = configs['CONFIG_FILTER_MAX_THREADS'] ? configs['CONFIG_FILTER_MAX_THREADS'] : null | ||
| this.currentConfigs.isShowSpotlightControls = configs['SHOW_SPOTLIGHT_CONTROLS'] === 'false' ? false : true | ||
| this.currentConfigs.syncNotificationPopupTimerConfig = configs['CONFIG_SYNC_NOTIFICATION_POPUP_TIMER'] ? configs['CONFIG_SYNC_NOTIFICATION_POPUP_TIMER'] : 60000 | ||
| this.currentConfigs.isCommentMediaAudio = configs['COMMENT_MEDIA_AUDIO_STUDENT'] === 'true' ? true : false | ||
|
|
||
| if (document.location.href.includes('/nb_viewer.html')) { | ||
| this.currentConfigs.isMarginalia = configs['SPOTLIGHT_MARGIN'] === 'true' ? true : false | ||
|
|
@@ -614,6 +602,10 @@ function embedNbApp() { | |
| this.users = res.data | ||
| this.$set(this.user, 'role', this.users[this.user.id].role) | ||
|
|
||
| if (this.user.role === 'instructor') { | ||
| this.currentConfigs.isCommentMediaAudio = configs['COMMENT_MEDIA_AUDIO_INSTRUCTOR'] === 'true' ? true : false | ||
| } | ||
|
|
||
| axios.get('/api/annotations/myCurrentSection', config).then(res => { | ||
| socket.emit('left', { id: this.user.id, username: this.user.username, classId: oldActiveClass.id, sectionId: this.currentSectionId, sourceURL: this.sourceURL, role: this.user.role }) | ||
| this.currentSectionId = res.data | ||
|
|
@@ -780,8 +772,8 @@ function embedNbApp() { | |
| // if this thread is open in the thread view, then refresh it | ||
| if (this.threadSelected && this.threadSelected.id === oldHeadAnnotationId) { | ||
| //this.threadSelected = comment | ||
| console.log(this.threadSelected); | ||
| console.log(comment); | ||
| // console.log(this.threadSelected); | ||
| // console.log(comment); | ||
| // this.threadSelected.children = comment.children | ||
| } | ||
|
|
||
|
|
@@ -880,7 +872,7 @@ function embedNbApp() { | |
| const token = localStorage.getItem("nb.user"); | ||
| const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source, class: newActiveClass.id, sectioned: !this.currentConfigs.isIgnoreSectionsInClass } } | ||
|
|
||
| axios.get('/api/annotations/new_annotation', config).then(async res => { | ||
| axios.get('/api/annotations/annotation', config).then(async res => { | ||
| this.threads = [] | ||
|
|
||
| for (const item of res.data.headAnnotations) { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| <template> | ||
| <div class="nb-audio-editor"> | ||
| <template v-if="showError"> | ||
| <span>Your browser doesn’t support audio recording or you’ve blocked microphone access.</span> | ||
| </template> | ||
|
|
||
| <template v-else> | ||
| <vue-dictaphone @stop="handleRecording($event)" @error="handleError" mime-type="audio/mp3" v-slot="{ isRecording, startRecording, stopRecording, deleteRecording }"> | ||
| <button v-if="!isRecording" @click="startRecording"><font-awesome-icon icon="circle" class="ae-icon"></font-awesome-icon></button> | ||
| <button v-if="isRecording" @click="stopRecording"><font-awesome-icon icon="stop" class="ae-icon"></font-awesome-icon></button> | ||
| <vue-dictaphone-spectrum-analyser v-if="isRecording"/> | ||
| </vue-dictaphone> | ||
| <template v-if="isRecorded"> | ||
| <audio :src="audioSource" controls></audio> | ||
| </template> | ||
| <button v-if="false &&!isRecording && isRecorded" @click="handleDeleteRecording"><font-awesome-icon icon="trash" class="ae-icon"></font-awesome-icon></button> | ||
| </template> | ||
|
|
||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Vue from 'vue' | ||
| import VueDictaphone from "vue-dictaphone"; | ||
| Vue.use(VueDictaphone); | ||
| export default { | ||
| name: 'audio-editor', | ||
| props: { | ||
| }, | ||
| data () { | ||
| return { | ||
| isRecorded: false, | ||
| audioSource: null, | ||
| mediaBlob: null, | ||
| showError: false, | ||
| } | ||
| }, | ||
| methods: { | ||
| handleRecording({ blob, src }) { | ||
| this.isRecorded = true | ||
| this.audioSource = src; | ||
| this.mediaBlob = blob | ||
| this.$emit("audio-stop", blob) | ||
| }, | ||
| handleDeleteRecording() { | ||
| if (window.confirm("Are you sure?")) { | ||
| // this.audioSource = null | ||
| // this.mediaBlob = null | ||
| this.isRecorded = false | ||
| console.log('delete now') | ||
| } | ||
| }, | ||
| handleError() { | ||
| this.showError = true; | ||
| }, | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| .nb-audio-editor { | ||
| background: #f9f5f5; | ||
| height: 75px; | ||
| margin: 15px 0; | ||
| display: flex; | ||
| align-content: center; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| border: 1px solid #d5d5d5; | ||
| } | ||
| .nb-audio-editor div { | ||
| display: flex; | ||
| align-items: center; | ||
| align-content: center; | ||
| } | ||
| .nb-audio-editor div canvas { | ||
| width: calc(100% - 50px); | ||
| } | ||
| .nb-audio-editor button { | ||
| line-height: initial; | ||
| height: 40px; | ||
| width: 40px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| background: #efefef; | ||
| border: 1px solid #969696; | ||
| border-radius: 0; | ||
| margin: 10px; | ||
| } | ||
| .nb-audio-editor audio { | ||
| margin: 0 10px; | ||
| width: 100%; | ||
| } | ||
| .nb-audio-editor .ae-icon { | ||
| } | ||
| </style> |
Oops, something went wrong.