This repository has been archived by the owner on Nov 5, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 95
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6ce8508
commit 7056ef4
Showing
8 changed files
with
214 additions
and
76 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
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 |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| const chromeExtensionId = 'fckappdcgnijafmmjkcmicdidflhelfe'; | ||
|
|
||
| const checkIfExtensionInstalled = function () { | ||
| return new Promise(function(resolve, reject) { | ||
| chrome.runtime.sendMessage( | ||
| chromeExtensionId, | ||
| { | ||
| getExtensionVersion: true, | ||
| }, | ||
| function(version) { | ||
| resolve(Boolean(version)); | ||
| } | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| const testWebControllerConnectivity = function (path) { | ||
| return new Promise(function(resolve, reject) { | ||
| chrome.runtime.sendMessage( | ||
| chromeExtensionId, | ||
| {path}, | ||
| function(response) { | ||
| resolve(response && response.success && response.code && response.code == 200); | ||
| // reject('Cannot connect to vMix. Make sure Web Controller is enabled in vMix and that you\'ve copied over the website address correctly.'); | ||
| } | ||
| ); | ||
| }) | ||
| }; | ||
|
|
||
| export default {checkIfExtensionInstalled, testWebControllerConnectivity} |
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 |
|---|---|---|
| @@ -1,80 +1,146 @@ | ||
| <template> | ||
| <div class="settings-vmix-view"> | ||
| <p><a href="https://vmix.com" target="_blank">vMix</a> is a popular software video mixer and switcher. You can send text directly to vMix and display it in a title input. You can then use vMix's font and color controls to style captioned text. <a href="/help/integrations/vmix/">Visit the Help Center</a> for more information.</p> | ||
| <!-- | ||
| <button id="sendToVmixSettingToggle" type="button" class="btn btn-secondary btn-block" disabled autocomplete="off"> | ||
| <i class="fa fa-times mr-2" aira-hidden="true"></i>Send to vMix is <span id="send-to-vmix-status-text">off</span> | ||
| </button> | ||
| --> | ||
| <hr/> | ||
| <div class="vmixStep" data-vmix-step="1" data-error-state="false"> | ||
| <h3> | ||
| <span class="badge badge-danger pt-2 mr-2" data-toggle="tooltip" data-placement="top" title="Not complete"><i class="fa fa-exclamation-triangle"></i></span> | ||
| <span class="badge badge-success pt-2 mr-2" hidden><i class="fa fa-check"></i> Done</span> | ||
| <a href="#vmixStep1" data-toggle="collapse" aria-expanded="false" aria-controls="vmixStep1">Step 1: Install the Chrome Extension</a> | ||
| </h3> | ||
| <div id="vmixStep1" class="collapse show ml-4"> | ||
| <p class="mb-2"> | ||
| The Web Captioner Connector extension enables your browser to send commands to vMix running on your computer or somewhere else on the network. | ||
| </p> | ||
| <button id="addExtensionToChromeButton" type="button" class="btn btn-info"><i class="fa fa-chrome mr-2"></i>Add to Chrome</button> | ||
| <button id="extensionIsAddedToChromeButton" type="button" class="btn btn-success" hidden disabled><i class="fa fa-check mr-2"></i>Added to Chrome</button> | ||
| </div> | ||
| </div> | ||
| <hr/> | ||
| <div class="vmixStep" data-vmix-step="2" data-error-state="false"> | ||
| <h3> | ||
| <span class="badge badge-danger pt-2 mr-2" data-toggle="tooltip" data-placement="top" title="Not complete"><i class="fa fa-exclamation-triangle"></i></span> | ||
| <span class="badge badge-success pt-2 mr-2" hidden><i class="fa fa-check"></i> Done</span> | ||
| <a href="#vmixStep2" data-toggle="collapse" aria-expanded="false" aria-controls="vmixStep2">Step 2: Enable vMix web controller</a> | ||
| </h3> | ||
| <div id="vmixStep2" class="collapse show"> | ||
| <ol class="ml-0 mb-2"> | ||
| <li>In vMix, go to <strong>Settings > Web Controller</strong>.</li> | ||
| <li>Check the box to enable the <a href="http://www.vmix.com/knowledgebase/article.aspx/69/how-to-control-vmix-from-a-web-browser-using-vmix-web-controller" target="_blank">web controller</a>. Specify a port number or accept the default.</li> | ||
| <li>Copy and paste the website address that appears in vMix here:</li> | ||
| </ol> | ||
| <div class="form-group ml-4 mb-2"> | ||
| <input type="url" id="vmixWebControllerAddress" class="form-control" placeholder="vMix Web Controller Address" required="true" /> | ||
| <p class="mb-2"><small class="form-text text-muted">Example: http://192.168.1.1:8080</small></p> | ||
| </div> | ||
| <p class="ml-4"> | ||
| <button class="btn btn-info" id="testConnectionButton"><i class="fa fa-check mr-2" hidden aria-hidden="true"></i>Test Connection</button> | ||
| <i id="testConnectionSpinner" hidden class="fa fa-circle-o-notch fa-spin fa-fw"></i> | ||
| <strong id="connectionSuccessMessage" hidden class="text-success ml-2">Success!</strong> | ||
| <p id="couldNotConnectMessage" hidden class="text-danger ml-4"><strong>Could not connect. Check to make sure that vMix is running, web controller in vMix is enabled, and that the web controller address above is correct.</strong></p> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <hr/> | ||
| <div class="vmixStep" data-vmix-step="3" data-error-state="false"> | ||
| <h3> | ||
| <span class="badge badge-danger pt-2 mr-2" data-toggle="tooltip" data-placement="top" title="Not complete"><i class="fa fa-exclamation-triangle"></i></span> | ||
| <span class="badge badge-success pt-2 mr-2" hidden><i class="fa fa-check"></i> Done</span> | ||
| <a href="#vmixStep3" data-toggle="collapse" aria-expanded="false" aria-controls="vmixStep3">Step 3: Import the Web Captioner title template into vMix</a> | ||
| </h3> | ||
| <div id="vmixStep3" class="collapse show"> | ||
| <ol class="ml-0 mb-2"> | ||
| <li>Download the Web Captioner vMix title template:<br/> <a href="/web-captioner-title.xaml" class="btn btn-secondary mt-1 mb-2">Web Captioner vMix Title Template <i class="fa fa-external-link ml-1" aria-hidden="true"></i></a></li> | ||
| <li>In vMix, go to <strong>Add Input > Title/XAML</strong>. In the upper right of the Input Select window, click <strong>Browse...</strong> and open the Web Captioner title template.</li> | ||
| <li>The title will appear in the <strong>Recent</strong> tab. Double-click it.</li> | ||
| <li>In the Title Editor that appears, optionally customize font and text size. Close it when you are finished.</li> | ||
| <li>Test your imported title:</li> | ||
| </ol> | ||
| <div class="ml-4"> | ||
| <button class="btn btn-info" id="testVmixTitleButton"><i class="fa fa-check mr-2" hidden aria-hidden="true"></i>Send Test Message to vMix</button> | ||
| <i id="testVmixTitleSpinner" hidden class="fa fa-circle-o-notch fa-spin fa-fw"></i> | ||
| <p id="testVmixTitleSuccessMessage" style="font-weight:bold" hidden class="text-success ml-4">Success!</p> | ||
| <p id="testVmixTitleErrorMessage" style="font-weight:bold" hidden class="text-danger ml-4">Error</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <p><a href="https://vmix.com" target="_blank">vMix</a> is a popular software video mixer and switcher. You can send text directly to vMix and display it in a title input. You can then use vMix's font and color controls to style captioned text. <a href="/help/integrations/vmix/">Visit the Help Center</a> to learn more.</p> | ||
| <b-card no-body> | ||
| <b-tabs small pills card class="nav-fill" v-model="vmixStepsTabIndex"> | ||
| <b-tab active> | ||
| <template slot="title"> | ||
| <div class="text-md-left"> | ||
| <i class="fa fa-check" v-if="chromeExtensionInstalled" aria-hidden="true"></i> Step 1 | ||
| <div class="small d-none d-md-block"><span class="d-none d-xl-inline">Install </span>Chrome Extension</div> | ||
| </div> | ||
| </template> | ||
| <h4 class="mt-0">Install the Chrome Extension</h4> | ||
| <p class="mb-2">The Web Captioner Connector extension for Google Chrome lets Web Captioner connect to vMix.</p> | ||
| <div class="mt-3 mb-4"> | ||
| <b-button v-if="!chromeExtensionInstalled" @click="initChromeExtensionInstall" variant="outline-info"><i class="fa fa-chrome mr-2"></i>Add to Chrome</b-button> | ||
| <b-button v-else variant="outline-info" disabled><i class="fa fa-check mr-2"></i>Extension Installed</b-button> | ||
| </div> | ||
| <hr class="my-3" /> | ||
| <div class="text-right"> | ||
| <b-button @click="vmixStepsTabIndex = 1" size="sm" :variant="chromeExtensionInstalled ? 'secondary' : 'default'" :disabled="!chromeExtensionInstalled">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></b-button> | ||
| </div> | ||
| </b-tab> | ||
| <b-tab :disabled="!chromeExtensionInstalled"> | ||
| <template slot="title"> | ||
| <div class="text-md-left" id="vmixStep2Tab"> | ||
| Step 2 | ||
| <div class="small d-none d-md-block">vMix Web Controller</div> | ||
| </div> | ||
| <b-tooltip v-if="!chromeExtensionInstalled" target="vmixStep2Tab"> | ||
| Complete step 1 first | ||
| </b-tooltip> | ||
| </template> | ||
| <h4 class="mt-0">Enable the vMix Web Controller</h4> | ||
| <p>In vMix, go to <strong>Settings > Web Controller</strong>. Check the box to enable the <a href="http://www.vmix.com/knowledgebase/article.aspx/69/how-to-control-vmix-from-a-web-browser-using-vmix-web-controller" target="_blank">web controller</a>. Specify a port number or accept the default.</p> | ||
| <p>Provide the address that appears in vMix:</p> | ||
| <b-input-group :class="{'append-embedded-in-input': webControllerConnected}"> | ||
| <input @keydown="resetWebControllerConnectedStatus()" v-model="webControllerAddress" type="url" class="form-control" placeholder="vMix Web Controller Address" required="true" /> | ||
| <template slot="append" v-if="webControllerConnected"> | ||
| <div class="input-group-text text-success"> | ||
| <i class="fa fa-check fa-fw pr-3" style="position:relative;top:-1px" aria-hidden="true"></i> Connected | ||
| </div> | ||
| </template> | ||
| </b-input-group> | ||
| <p class="mt-2"><small class="form-text text-muted">Example: http://192.168.1.1:8080</small></p> | ||
| <b-alert :show="showConnectionFailureMessage" dismissible variant="danger">Cannot connect to vMix. Make sure Web Controller is enabled in vMix and that you've copied over the website address correctly. It should look something like this: http://192.168.1.1:8080</b-alert> | ||
| <hr class="my-3" /> | ||
| <div class="text-right"> | ||
| <b-button @click="refreshVmixSetupStatus()" size="sm" :variant="webControllerAddress == '' ? 'default' : 'secondary'" :disabled="webControllerAddress == ''">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></b-button> | ||
| </div> | ||
| </b-tab> | ||
| <b-tab> | ||
| <template slot="title"> | ||
| <div class="text-md-left"> | ||
| Step 3 | ||
| <div class="small d-none d-md-block"><span class="d-none d-xl-inline">Import </span>Title Template</div> | ||
| </div> | ||
| </template> | ||
| <h4 class="mt-0">Import the Web Captioner Title Template into vMix</h4> | ||
| <ol class="ml-0 mb-2"> | ||
| <li>Download the Web Captioner vMix title template:<br/> <a href="/web-captioner-title.xaml" class="btn btn-outline-info mt-1 mb-2">Web Captioner vMix Title Template <i class="fa fa-external-link ml-1" aria-hidden="true"></i></a></li> | ||
| <li>In vMix, go to <strong>Add Input > Title/XAML</strong>. In the upper right of the Input Select window, click <strong>Browse...</strong> and open the Web Captioner title template.</li> | ||
| <li>The title will appear in the <strong>Recent</strong> tab. Double-click it.</li> | ||
| <li>In the Title Editor that appears, optionally customize font and text size. Close it when you are finished.</li> | ||
| </ol> | ||
| <hr class="my-3" /> | ||
| <div class="text-right"> | ||
| <b-button size="sm" :variant="webControllerAddress == '' ? 'default' : 'secondary'" :disabled="webControllerAddress == ''">Test and Finish Setup</b-button> | ||
| </div> | ||
| </b-tab> | ||
| </b-tabs> | ||
| </b-card> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .nav-link.disabled { | ||
| color:#aaa!important; | ||
| cursor:default; | ||
| } | ||
| .nav-link.disabled:hover { | ||
| background:#eee; | ||
| } | ||
| .input-group.append-embedded-in-input input { | ||
| border-right: 0px solid transparent; | ||
| } | ||
| .input-group.append-embedded-in-input .input-group-append .input-group-text { | ||
| background-color: transparent; | ||
| border-left: 0px solid transparent; | ||
| } | ||
| </style> | ||
|
|
||
|
|
||
| <script> | ||
| export default { | ||
| name: 'settings-vmix-view', | ||
| data: function() { | ||
| return { | ||
| vmixStepsTabIndex: 0, | ||
| }; | ||
| }, | ||
| mounted: function() { | ||
| this.refreshVmixSetupStatus(); | ||
| }, | ||
| methods: { | ||
| initChromeExtensionInstall: function () { | ||
| let self = this; | ||
| chrome.webstore.install(null, function() { | ||
| // Successful | ||
| self.refreshVmixSetupStatus(); | ||
| }, function() { | ||
| // Unsuccessful | ||
| }); | ||
| }, | ||
| refreshVmixSetupStatus: function () { | ||
| this.$store.dispatch('REFRESH_VMIX_SETUP_STATUS'); | ||
| }, | ||
| resetWebControllerConnectedStatus: function () { | ||
| this.$store.commit('RESET_WEB_CONTROLLER_CONNECTED_STATUS'); | ||
| }, | ||
| }, | ||
| computed: { | ||
| chromeExtensionInstalled: function() { | ||
| return this.$store.state.integrations.vmix.chromeExtensionInstalled; | ||
| }, | ||
| webControllerConnected: function() { | ||
| return this.$store.state.integrations.vmix.webControllerConnected; | ||
| }, | ||
| webControllerAddress: { | ||
| get () { | ||
| return this.$store.state.integrations.vmix.webControllerAddress; | ||
| }, | ||
| set (webControllerAddress) { | ||
| this.$store.commit('SET_VMIX_WEB_CONTROLLER_ADDRESS', {webControllerAddress}); | ||
| } | ||
| }, | ||
| showConnectionFailureMessage: function () { | ||
| return this.webControllerAddress != '' && this.webControllerConnected === false; | ||
| }, | ||
| }, | ||
| } | ||
| </script> |