fix: playNext/playLast media, keybinds

feat: w2g joining

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "main": "src/index.js",
   "homepage": "https://github.com/ThaUnknown/miru#readme",

src/renderer/src/lib/Player/MediaHandler.svelte

@@ -16,7 +16,7 @@ const processed = writable([])
 
 const noop = () => {}
 
-let playFile = noop
+let playFile
 
 media.subscribe((media) => {
   handleMedia(media || {})

src/renderer/src/lib/Player/Player.svelte

@@ -67,8 +67,6 @@ let volume = localStorage.getItem('volume') || 1
 let playbackRate = 1
 $: localStorage.setItem('volume', volume || 0)
 
-export let media
-
 function checkAudio () {
   if ('audioTracks' in HTMLVideoElement.prototype && !video.audioTracks.length) {
     addToast({
@@ -186,14 +184,17 @@ async function handleCurrent (file) {
     src = file.url
     client.send('current', file)
     video?.load()
-    checkAvail(current)
     clearCanvas()
   }
 }
 
+export let media
+
+$: checkAvail(media)
 let hasNext = false
 let hasLast = false
-function checkAvail (current) {
+function checkAvail () {
+  console.log(media)
   if ((media?.media?.nextAiringEpisode?.episode - 1 || media?.media?.episodes) > media?.episode) {
     hasNext = true
   } else if (videos.indexOf(current) !== videos.length - 1) {
@@ -443,6 +444,11 @@ loadWithDefaults({
     id: 'skip_next',
     type: 'icon'
   },
+  KeyB: {
+    fn: () => playLast(),
+    id: 'skip_previous',
+    type: 'icon'
+  },
   KeyM: {
     fn: () => (muted = !muted),
     id: 'volume_off',
@@ -945,7 +951,7 @@ function checkError ({ target }) {
     <div class='position-absolute w-full h-full' on:dblclick={toggleFullscreen} on:click|self={() => (page = 'player')}>
       <div class='play-overlay w-full h-full' on:click={playPause} />
     </div>
-    <span class='material-icons ctrl' class:text-muted={!hasNext} class:disabled={!hasNext} data-name='playLast' on:click={playLast}> skip_previous </span>
+    <span class='material-icons ctrl' class:text-muted={!hasLast} class:disabled={!hasLast} data-name='playLast' on:click={playLast}> skip_previous </span>
     <span class='material-icons ctrl' data-name='rewind' on:click={rewind}> fast_rewind </span>
     <span class='material-icons ctrl' data-name='playPause' on:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
     <span class='material-icons ctrl' data-name='forward' on:click={forward}> fast_forward </span>
@@ -980,6 +986,9 @@ function checkError ({ target }) {
     </div>
     <div class='d-flex'>
       <span class='material-icons ctrl' title='Play/Pause [Space]' data-name='playPause' on:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
+      {#if hasLast}
+        <span class='material-icons ctrl' title='Last [B]' data-name='playLast' on:click={playLast}> skip_previous </span>
+      {/if}
       {#if hasNext}
         <span class='material-icons ctrl' title='Next [N]' data-name='playNext' on:click={playNext}> skip_next </span>
       {/if}

src/renderer/src/lib/WatchTogether/WatchTogether.svelte

@@ -3,7 +3,7 @@ import { writable } from 'svelte/store'
 import { alID } from '@/modules/anilist.js'
 import { add, client } from '@/modules/torrent.js'
 import { generateRandomHexCode } from '@/modules/util.js'
-// import { addToast } from '@/lib/Toasts.svelte'
+import { addToast } from '@/lib/Toasts.svelte'
 import { page } from '@/App.svelte'
 import 'browser-event-target-emitter'
 
@@ -118,14 +118,18 @@ const playerState = {
   index: 0
 }
 
-const linkRx = /(.*)/i
-window.IPC.on('w2glink', async link => {
-  const match = link.match(linkRx)
-  if (match) {
-    page.set('watchtogether')
-    joinLobby(match[1])
+function checkInvite (invite) {
+  if (invite) {
+    const match = invite.match(inviteRx)
+    if (match) {
+      page.set('watchtogether')
+      joinLobby(match[1])
+    }
   }
-})
+}
+
+const inviteRx = /([A-z0-9]{16})/i
+window.IPC.on('w2glink', checkInvite)
 
 function cleanup () {
   state.set(false)
@@ -133,10 +137,26 @@ function cleanup () {
   p2pcf.destroy()
   p2pcf = null
 }
+
+function invite () {
+  if (p2pcf) {
+    navigator.clipboard.writeText(`<miru://w2g/${p2pcf.roomId}>`)
+    addToast({
+      title: 'Copied to clipboard',
+      text: 'Copied invite URL to clipboard',
+      type: 'primary',
+      duration: '5000'
+    })
+  }
+}
 </script>
 
 <script>
 import Lobby from './Lobby.svelte'
+
+let joinText
+
+$: checkInvite(joinText)
 </script>
 
 <div class='d-flex h-full align-items-center flex-column content'>
@@ -149,11 +169,18 @@ import Lobby from './Lobby.svelte'
       </div>
       <div class='card d-flex flex-column align-items-center w-300 h-300 justify-content-end'>
         <span class='font-size-80 material-icons d-flex align-items-center h-full'>group_add</span>
-        <button class='btn btn-primary btn-lg mt-10 btn-block' type='button' on:click={() => {}}>Join Lobby</button>
+        <h2 class='font-weight-bold'>Join Lobby</h2>
+        <input
+          type='text'
+          class='form-control h-50'
+          autocomplete='off'
+          bind:value={joinText}
+          data-option='search'
+          placeholder='Lobby code or link' />
       </div>
     </div>
   {:else}
-    <Lobby peers={$peers} {cleanup} />
+    <Lobby peers={$peers} {cleanup} {invite} />
   {/if}
 </div>