Web rtc connections

.github/workflows/GenerateChangelog.yml

@@ -0,0 +1,92 @@
+name: GenerateChangelog
+on:
+  push:
+    tags:
+      - '*' ## We are watching for all tags. Create a release, generate a new tag, and the rest of this script will run
+jobs:
+  build:
+    runs-on: macos-latest
+    steps:
+    - name: Checkout the code
+      uses: actions/checkout@v2
+      with:
+        persist-credentials: false
+        submodules: true ## Installs the android, electron, and locales directory
+        fetch-depth: 400 ## This fetches entire history, we need this so we can get all the tags
+    - name: Reconfigure git to use HTTP authentication
+      run: >
+        git config --global url."https://github.com/".insteadOf
+        ssh://git@github.com/
+    - name: Get Tags/Checkout bug override
+      run: git fetch --tags --force ## take this out later if https://github.com/actions/checkout/issues/290 is fixed
+    - name: Set env
+      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV ## Later this is used to update the output files so they have the tag number in the name
+    - name: Find and Replace Version Numer in Package File ## bumps package version to match ref for the build, will commit to repo at the end when the files are created
+      run: |
+        sed -i '' -e 's/\"version\":.*/\"version\": "${{ env.RELEASE_VERSION }}",/g' package.json
+    - name: Get Current Release Version
+      run: |
+        echo $RELEASE_VERSION
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: '16'
+
+    # - name: Install dependencies
+    #   run: yarn
+
+    - name: Getting Tag Names
+      run: |
+        echo "ELDERLY=$(git tag --sort version:refname | tail -n 3 | head -n 1)" >> $GITHUB_ENV
+        echo "START=$(git tag --sort version:refname | tail -n 2 | head -n 1)" >> $GITHUB_ENV
+        echo "END=$(git tag --sort version:refname | tail -n 1 | head -n 1)" >> $GITHUB_ENV
+        echo $(git tag)
+
+    - name: Build Changelog
+      id: github_release
+      uses: mikepenz/release-changelog-builder-action@main
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        commitMode: true
+        configuration: ".github/config/changelog_config.json"
+        fromTag: "${{ env.ELDERLY }}"
+        toTag: "${{ env.END }}"
+        outputFile: ./changelog.txt
+
+    - name: Combine Changelog and Checksums
+      run: |
+        sed -i '' '/Merge pull request/d' changelog.txt
+        sed -i '' '/Merge branch/d' changelog.txt
+        awk '!visited[$0]++' changelog.txt > deduplicated_changelog.txt
+
+    - name: Copy file to release
+      uses: softprops/action-gh-release@v1
+      with:
+        body_path: ./deduplicated_changelog.txt
+
+  commit:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v2
+        with:
+          ref: main
+      - name: Set env
+        run: |
+          echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+      - name: Find and Replace Version Numer in Package File ## bumps package version to match ref for the build, will commit to repo at the end when the files are created
+        run: |
+          sed -i -e 's/\"version\":.*/\"version\": "${{ env.RELEASE_VERSION }}",/g' ./package.json
+      - name: Commit Package.json to Repo
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          branch: main
+          commit_message: Increment Package Version
+          file_pattern: ./package.json
+          commit_user_name: Github Actions # defaults to "GitHub Actions"
+          commit_user_email: dev@satellite.im # defaults to "actions@github.com"
+          commit_author: Github Actions <dev@satellite.im> # defaults to author of the commit that triggered the run

components/mixins/Layouts/Layout.ts

@@ -46,8 +46,8 @@ export default Vue.extend({
      */
     toggleMarketPlace() {
       this.$store.commit('ui/toggleModal', {
-        name: 'showMarketPlace',
-        state: !this.ui.modals.showMarketPlace,
+        name: 'marketplace',
+        state: !this.ui.modals['marketplace'],
       })
     },
   },

components/tailored/core/chatbar/Chatbar.html

@@ -22,5 +22,5 @@
 
     <TailoredCoreChatbarControls :sendMessage="sendMessage" id="chatbar-controls"/>
   </div>
-  <TailoredCoreChatbarFooter :text="text" :charlimit="charlimit" />
+  <TailoredCoreChatbarFooter :text="text" :charlimit="charlimit" :typing="recipientTyping" :usersTyping="activeFriend ? [ activeFriend ] : []" />
 </div>

components/tailored/core/chatbar/Chatbar.vue

@@ -3,6 +3,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { mapState } from 'vuex'
+import { debounce } from 'lodash'
 
 import { TerminalIcon } from 'satellite-lucide-icons'
 
@@ -23,6 +24,9 @@ declare module 'vue/types/vue' {
     value: string
     updateText: Function
     handleUpload: Function
+    debounceTypingStop: Function
+    typingNotifHandler: Function
+    smartTypingStart: Function
   }
 }
 
@@ -36,6 +40,7 @@ export default Vue.extend({
       text: '',
       showEmojiPicker: false,
       maxChars: 256,
+      recipientTyping: false,
     }
   },
   props: {
@@ -44,7 +49,10 @@ export default Vue.extend({
     },
   },
   computed: {
-    ...mapState(['ui']),
+    ...mapState(['ui', 'friends']),
+    activeFriend() {
+      return this.$store.state.friends.all.filter((f: Friend) => f.activeChat === true)[0]
+    },
     /**
      * Computes the amount of characters left
      */
@@ -114,6 +122,39 @@ export default Vue.extend({
     },
   },
   methods: {
+    /**
+     * @method typingNotifHandler
+     * @description Wraps the event handler for dispatching typing notifications
+     * TODO: Right now this is hard coded to the WebRTC Data method, in the future this should be
+     * agnostic and the method should be passed to chatbar so we can support group, and direct messages.
+     */
+    typingNotifHandler(
+      state: 'TYPING' | 'NOT_TYPING',
+    ) {
+      const activeFriend = this.$store.state.friends.all.filter(
+        (f: Friend) => f.activeChat === true,
+      )[0]
+      const activePeer = this.$WebRTC.getPeer(activeFriend.address)
+      activePeer?.send('TYPING_STATE', { state })
+    },
+    /**
+     * @method debounceTypingStop
+     * @description Debounces the typing event so that we only send the typing stopped after it's been
+     * the configured amount of time since they last triggered a keyup event.
+     */
+    debounceTypingStop: debounce(function (ctx) {
+      ctx.$data.typing = false
+      ctx.typingNotifHandler('NOT_TYPING')
+    }, 500),
+    /**
+     * @method smartTypingStart
+     * @description Let's us send out events when a user starts typing without spam.
+     */
+    smartTypingStart() {
+      if (this.$data.typing) return
+      this.$data.typing = true
+      this.typingNotifHandler('TYPING')
+    },
     /**
      * @method handleInputChange DocsTODO
      * @description Called from handleInputKeydown function when normal key events are fired for typing in chatbar.
@@ -163,9 +204,11 @@ export default Vue.extend({
         default:
           break
       }
+      this.smartTypingStart()
       this.handleInputChange()
     },
     handleInputKeyup(event: KeyboardEvent) {
+      this.debounceTypingStop(this)
       this.$nextTick(() => {
         this.handleInputChange()
       })
@@ -258,6 +301,13 @@ export default Vue.extend({
     '$store.state.ui.chatbarContent': function () {
       this.updateText()
     },
+    '$store.state.friends.all': {
+      handler () {
+        const activeFriend = this.$store.state.friends.all.filter((f: Friend) => f.activeChat === true)[0]
+        this.$data.recipientTyping = activeFriend.typingState === 'TYPING'
+      },
+      deep: true,
+    },
   },
 })
 </script>