80 lines
No EOL
3.1 KiB
HTML
80 lines
No EOL
3.1 KiB
HTML
<div class="md-container md-container_panel" id="itunes-remote-vue">
|
|
<div class="md-header-title">
|
|
<div class="row">
|
|
<div class="col">
|
|
<button @click="close()" v-if="state != 'connecting'" class="md-close-btn"></button>
|
|
</div>
|
|
<div class="col-auto">
|
|
Add Remote for iPhone, Apple Watch, iPod touch & iPad
|
|
</div>
|
|
<div class="col">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="md-body" style="overflow-y: overlay;display: flex;align-items: center;justify-content: center">
|
|
<div class="dialogContainer" v-if="state == 'pin'">
|
|
<div>Please enter the passcode displayed on "Device Name" to allow it to control<br>Apple Music Electron.</div>
|
|
<div class="row pairNumberContainer">
|
|
<div class="col-auto">
|
|
<input type="number" v-model="passcode[0]" id="passcode-num-0" @input="jumpToNum(1)" class="pairNumber" min="0" step="1" max="9"/>
|
|
</div>
|
|
<div class="col-auto">
|
|
<input type="number" v-model="passcode[1]" id="passcode-num-1" @input="jumpToNum(2)" class="pairNumber" min="0" step="1" max="9"/>
|
|
</div>
|
|
<div class="col-auto">
|
|
<input type="number" v-model="passcode[2]" id="passcode-num-2" @input="jumpToNum(3)" class="pairNumber" min="0" step="1" max="9"/>
|
|
</div>
|
|
<div class="col-auto">
|
|
<input type="number" v-model="passcode[3]" id="passcode-num-3" @input="connect()" class="pairNumber" min="0" step="1" max="9"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dialogContainer" v-if="state == 'connecting'">
|
|
Please wait...
|
|
</div>
|
|
<div class="dialogContainer" v-if="state == 'error'">
|
|
There was an error pairing to your remote, please try again.
|
|
<button class="md-btn md-btn-primary" @click="retry()" style="display:block;margin: 0 auto;margin-top: 32px;">Retry</button>
|
|
</div>
|
|
<div class="dialogContainer" v-if="state == 'success'">
|
|
Your Remote is now able to control Apple Music Electron.
|
|
<button class="md-btn md-btn-primary" @click="close()" style="display:block;margin: 0 auto;margin-top: 32px;">OK</button>
|
|
</div>
|
|
</div>
|
|
<div class="md-footer">
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.dialogContainer {
|
|
border: 0px solid var(--systemGray);
|
|
padding: 32px;
|
|
text-align: center;
|
|
}
|
|
.pairNumberContainer {
|
|
margin: 0 auto;
|
|
width: 600px;
|
|
justify-content: center;
|
|
margin-top: 32px;
|
|
}
|
|
.pairNumber {
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
height: 58px;
|
|
font-size: 24px;
|
|
width: 54px;
|
|
background: white;
|
|
color: black;
|
|
border: 1px solid rgb(0 0 0 / 25%);
|
|
box-shadow: inset 0px 2px 2px rgb(0 0 0 / 35%);
|
|
}
|
|
|
|
.pairNumber::-webkit-outer-spin-button,
|
|
.pairNumber::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
</style> |