@slidev/client 0.28.10 → 0.29.2

package/builtin/Toc.vue

@@ -15,12 +15,14 @@ import { tree } from '../logic/nav'
 const props = withDefaults(
   defineProps<{
     columns?: string | number
+    listClass?: string | string[]
     maxDepth?: string | number
     minDepth?: string | number
     mode?: 'all' | 'onlyCurrentTree' | 'onlySiblings'
   }>(),
   {
     columns: 1,
+    listClass: '',
     maxDepth: Infinity,
     minDepth: 1,
     mode: 'all',
@@ -78,6 +80,6 @@ const toc = computed(() => {
 
 <template>
   <div class="slidev-toc" :style="`column-count:${columns}`">
-    <TocList :level="1" :list="toc" />
+    <TocList :level="1" :list="toc" :list-class="listClass" />
   </div>
 </template>

package/builtin/TocList.vue

@@ -7,19 +7,30 @@ Usage:
 <TocList :list="list"/>
 -->
 <script setup lang="ts">
+import { computed } from 'vue'
+import { toArray } from '@antfu/utils'
 import type { TocItem } from '../logic/nav'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   level: number
   list: TocItem[]
+  listClass?: string | string[]
 }>(), { level: 1 })
+
+const classes = computed(() => {
+  return [
+    ...toArray(props.listClass || []),
+    'slidev-toc-list',
+    `slidev-toc-list-level-${props.level}`,
+  ]
+})
 </script>
 
 <template>
-  <ul v-if="list && list.length > 0" :class="['slidev-toc-list', `slidev-toc-list-level-${level}`]">
+  <ol v-if="list && list.length > 0" :class="classes">
     <li v-for="item in list" :key="item.path" :class="['slidev-toc-item', {'slidev-toc-item-active': item.active}, {'slidev-toc-item-parent-active': item.activeParent}]">
       <RouterLink :to="item.path" v-html="item.title" />
-      <TocList :level="level + 1" :list="item.children" />
+      <TocList :level="level + 1" :list="item.children" :list-class="listClass" />
     </li>
-  </ul>
+  </ol>
 </template>

package/internals/DevicesList.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { currentCamera, currentMic } from '../state'
-import { cameras, ensureDevicesListPermissions, microphones } from '../logic/recording'
+import {
+  cameras,
+  ensureDevicesListPermissions,
+  microphones,
+  mimeExtMap,
+  mimeType,
+  supportedMimeTypes,
+} from '../logic/recording'
 import SelectList from './SelectList.vue'
 import type { SelectionItem } from './types'
 
@@ -27,6 +34,11 @@ const microphonesItems = computed<SelectionItem<string>[]>(() => [
   })),
 ])
 
+const mimeTypeItems = supportedMimeTypes.map(mime => ({
+  value: mime,
+  display: mimeExtMap[mime].toUpperCase(),
+}))
+
 ensureDevicesListPermissions()
 </script>
 
@@ -34,5 +46,11 @@ ensureDevicesListPermissions()
   <div class="text-sm">
     <SelectList v-model="currentCamera" title="Camera" :items="camerasItems" />
     <SelectList v-model="currentMic" title="Microphone" :items="microphonesItems" />
+    <SelectList
+      v-if="mimeTypeItems.length"
+      v-model="mimeType"
+      title="mimeType"
+      :items="mimeTypeItems"
+    />
   </div>
 </template>

package/internals/NavControls.vue

@@ -8,6 +8,8 @@ import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
+// @ts-expect-error virtual module
+import CustomNavControls from '/@slidev/custom-nav-controls'
 
 const props = defineProps({
   persist: {
@@ -153,6 +155,8 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <span class="opacity-50">/ {{ total }}</span>
         </div>
       </div>
+
+      <CustomNavControls />
     </div>
   </nav>
 </template>

package/internals/RecordingDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { nextTick } from 'vue'
-import { getFilename, recordCamera, recorder, recordingName } from '../logic/recording'
+import { getFilename, mimeType, recordCamera, recorder, recordingName } from '../logic/recording'
 import Modal from './Modal.vue'
 import DevicesList from './DevicesList.vue'
 
@@ -25,7 +25,9 @@ function close() {
 async function start() {
   close()
   await nextTick()
-  startRecording()
+  startRecording({
+    mimeType: mimeType.value,
+  })
 }
 </script>
 
@@ -46,7 +48,7 @@ async function start() {
             placeholder="Enter the title..."
           >
           <div class="text-xs w-full opacity-50 py-2">
-            <div>This will be used in the output filename that might <br>help you better orangize your recording chips.</div>
+            <div>This will be used in the output filename that might <br>help you better organize your recording chips.</div>
           </div>
         </div>
         <div class="form-check">
@@ -57,15 +59,16 @@ async function start() {
           >
           <label for="record-camera" @click="recordCamera = !recordCamera">Record camera separately</label>
         </div>
+
         <div class="text-xs w-full opacity-50">
           <div class="mt-2 opacity-50">
             Enumerated filenames
           </div>
           <div class="font-mono">
-            {{ getFilename('screen') }}
+            {{ getFilename('screen', mimeType) }}
           </div>
           <div v-if="recordCamera" class="font-mono">
-            {{ getFilename('camera') }}
+            {{ getFilename('camera', mimeType) }}
           </div>
         </div>
       </div>

package/logic/recording.ts

@@ -1,24 +1,44 @@
 import type { Ref } from 'vue'
 import { nextTick, ref, shallowRef, watch } from 'vue'
-import { useDevicesList, useEventListener } from '@vueuse/core'
+import { useDevicesList, useEventListener, useStorage } from '@vueuse/core'
 import { isTruthy } from '@antfu/utils'
 import type RecorderType from 'recordrtc'
 import type { Options as RecorderOptions } from 'recordrtc'
 import { currentCamera, currentMic } from '../state'
 
+type Defined<T> = T extends undefined ? never : T
+type MimeType = Defined<RecorderOptions['mimeType']>
+
 export const recordingName = ref('')
 export const recordCamera = ref(true)
+export const mimeType = useStorage<MimeType>('slidev-record-mimetype', 'video/webm')
+
+export const mimeExtMap: Record<string, string> = {
+  'video/webm': 'webm',
+  'video/webm;codecs=h264': 'mp4',
+  'video/x-matroska;codecs=avc1': 'mkv',
+}
 
-export function getFilename(media?: string) {
+export function getFilename(media?: string, mimeType?: string) {
   const d = new Date()
 
   const pad = (v: number) => `${v}`.padStart(2, '0')
 
   const date = `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`
 
-  return `${[media, recordingName.value, date].filter(isTruthy).join('-')}.webm`
+  const ext = mimeType ? mimeExtMap[mimeType] : 'webm'
+
+  return `${[media, recordingName.value, date].filter(isTruthy).join('-')}.${ext}`
 }
 
+function getSupportedMimeTypes() {
+  if (MediaRecorder && typeof MediaRecorder.isTypeSupported === 'function')
+    return Object.keys(mimeExtMap).filter(mime => MediaRecorder.isTypeSupported(mime))
+  return []
+}
+
+export const supportedMimeTypes = getSupportedMimeTypes()
+
 export const {
   devices,
   videoInputs: cameras,
@@ -115,7 +135,7 @@ export function useRecording() {
     }
   })
 
-  async function startRecording() {
+  async function startRecording(customConfig?: RecorderOptions) {
     await ensureDevicesListPermissions()
     const { default: Recorder } = await import('recordrtc')
     await startCameraStream()
@@ -132,6 +152,9 @@ export function useRecording() {
       },
     })
 
+    // merge config
+    Object.assign(config, customConfig)
+
     if (streamCamera.value) {
       const audioTrack = streamCamera.value!.getAudioTracks()?.[0]
       if (audioTrack)
@@ -159,7 +182,7 @@ export function useRecording() {
       if (recordCamera.value) {
         const blob = recorderCamera.value!.getBlob()
         const url = URL.createObjectURL(blob)
-        download(getFilename('camera'), url)
+        download(getFilename('camera', config.mimeType), url)
         window.URL.revokeObjectURL(url)
       }
       recorderCamera.value = undefined
@@ -169,7 +192,7 @@ export function useRecording() {
     recorderSlides.value?.stopRecording(() => {
       const blob = recorderSlides.value!.getBlob()
       const url = URL.createObjectURL(blob)
-      download(getFilename('screen'), url)
+      download(getFilename('screen', config.mimeType), url)
       window.URL.revokeObjectURL(url)
       closeStream(streamSlides)
       recorderSlides.value = undefined

package/package.json

@@ -1,38 +1,38 @@
 {
   "name": "@slidev/client",
-  "version": "0.28.10",
+  "version": "0.29.2",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
   "license": "MIT",
+  "author": "antfu <anthonyfu117@hotmail.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/slidevjs/slidev"
   },
   "funding": "https://github.com/sponsors/antfu",
-  "author": "antfu <anthonyfu117@hotmail.com>",
   "dependencies": {
     "@antfu/utils": "^0.5.0",
-    "@slidev/parser": "0.28.10",
-    "@slidev/types": "0.28.10",
-    "@vueuse/core": "^7.7.0",
+    "@slidev/parser": "0.29.2",
+    "@slidev/types": "0.29.2",
+    "@vueuse/core": "^8.1.2",
     "@vueuse/head": "^0.7.5",
-    "@vueuse/motion": "^2.0.0-beta.9",
+    "@vueuse/motion": "^2.0.0-beta.12",
     "codemirror": "^5.65.2",
     "drauu": "^0.3.0",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
-    "katex": "^0.15.2",
+    "katex": "^0.15.3",
     "mermaid": "^8.14.0",
-    "monaco-editor": "^0.32.1",
+    "monaco-editor": "^0.33.0",
     "nanoid": "^3.3.1",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.0",
-    "vite-plugin-windicss": "^1.8.2",
+    "vite-plugin-windicss": "^1.8.3",
     "vue": "^3.2.31",
-    "vue-router": "^4.0.13",
+    "vue-router": "^4.0.14",
     "windicss": "^3.5.1"
   },
   "engines": {