From 416c9aed37998942579d15c768d0e1723e6cfd1e Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 18 Jul 2023 19:38:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=A3=80=E6=B5=8B=E8=84=9A?=
 =?UTF-8?q?=E6=9C=AC;=20=E5=88=86=E6=95=B0=E5=A2=9E=E5=8A=A0=E5=9B=A0?=
 =?UTF-8?q?=E5=AD=90=E7=B3=BB=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.vue               |  4 +++-
 src/components/banner.vue |  3 +--
 src/components/footer.vue | 12 ++++++++++++
 src/lib/checks.js         | 27 ++++++++++++++++++++++++++
 src/store.js              | 41 ++++++++++++++++++++++++---------------
 5 files changed, 68 insertions(+), 19 deletions(-)
 create mode 100644 src/components/footer.vue
 create mode 100644 src/lib/checks.js

diff --git a/src/app.vue b/src/app.vue
index f01c08f..3b00038 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -2,15 +2,17 @@
   <Topbar />
   <Banner />
   <Modules />
+  <Copyright />
 </template>
 
 <script>
 import Topbar from './components/topbar.vue'
 import Banner from './components/banner.vue'
+import Copyright from './components/footer.vue'
 import Modules from './views/main.vue'
 
 export default {
-  components: { Topbar, Banner, Modules }
+  components: { Topbar, Banner, Modules, Copyright }
 }
 </script>
 
diff --git a/src/components/banner.vue b/src/components/banner.vue
index 9a4fc9b..4acd392 100644
--- a/src/components/banner.vue
+++ b/src/components/banner.vue
@@ -18,8 +18,7 @@
       </section>
 
       <section class="scores">
-        你当前浏览器的得分为 <span class="num">{{ $store.scores }}</span
-        >/<span class="num total">{{ $store.total }}</span>
+        你当前浏览器的得分为 <span class="num">{{ $store.scores }}</span>
       </section>
     </div>
 
diff --git a/src/components/footer.vue b/src/components/footer.vue
new file mode 100644
index 0000000..c1ddc29
--- /dev/null
+++ b/src/components/footer.vue
@@ -0,0 +1,12 @@
+<template>
+  <footer class="copyright">&copy; Powered by yutent. 2023</footer>
+</template>
+
+<style lang="scss" scoped>
+.copyright {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+  padding: 16px 0;
+}
+</style>
diff --git a/src/lib/checks.js b/src/lib/checks.js
new file mode 100644
index 0000000..4ff824c
--- /dev/null
+++ b/src/lib/checks.js
@@ -0,0 +1,27 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/07/18 19:11:01
+ */
+
+// 用canvas检测图形/图象的支持
+export function checkCanvas(type) {
+  try {
+    var canvas = document.createElement('canvas')
+    var ctx = canvas.getContext(type)
+    return ctx ? 1 : 0
+  } catch (err) {
+    console.log(err)
+    return 0
+  }
+}
+
+export function checkMedia(type, isAudio = true) {
+  let ctx = isAudio ? new Audio() : document.createElement('video')
+  let res = ctx.canPlayType(type)
+  console.log(isAudio, res)
+  if (res === 'maybe' || res === 'probably') {
+    return 1
+  }
+  return 0
+}
diff --git a/src/store.js b/src/store.js
index 2cfbce1..9a0e402 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,20 +1,9 @@
 import { reactive } from 'vue'
 
 import * as env from '@/lib/env.js'
-
-function checkCanvas(type) {
-  try {
-    var canvas = document.createElement('canvas')
-    var ctx = canvas.getContext(type)
-    return ctx ? 1 : 0
-  } catch (err) {
-    console.log(err)
-    return 0
-  }
-}
+import { checkCanvas, checkMedia } from '@/lib/checks.js'
 
 const store = reactive({
-  total: 100,
   scores: 80,
   useragent: navigator.userAgent,
   env,
@@ -23,7 +12,16 @@ const store = reactive({
     {
       name: '音频支持',
       total: 0,
-      scores: [!!window.AudioContext ^ 0, 1, 1, 1, 1, 1, 1],
+      factor: 80,
+      scores: [
+        !!window.AudioContext ^ 0,
+        checkMedia('audio/wav'),
+        checkMedia('audio/mpeg'),
+        checkMedia('audio/flac'),
+        checkMedia('audio/aac'),
+        checkMedia('audio/ogg'),
+        checkMedia('audio/webm')
+      ],
       items: [
         'Web Audio API',
         'pcm audio support',
@@ -39,7 +37,15 @@ const store = reactive({
     {
       name: '视频支持',
       total: 0,
-      scores: [0, 1, 1, 1, 1, 1],
+      factor: 80,
+      scores: [
+        checkMedia('video/mp4; codecs="mp4v.20.8"', 0),
+        checkMedia('video/mp4', 0),
+        checkMedia('video/mp4; codecs="hev1"', 0),
+        checkMedia('video/ogg', 0),
+        checkMedia('video/webm; codecs="vp8"', 0),
+        checkMedia('video/webm; codecs="vp9"', 0)
+      ],
       items: [
         'MPEG-4 ASP support',
         'H.264 support',
@@ -53,6 +59,7 @@ const store = reactive({
       name: '流媒体',
       total: 0,
       scores: [1, 1, 0, 0],
+      factor: 100,
       items: [
         'Media Source extensions',
         'DRM support',
@@ -63,6 +70,7 @@ const store = reactive({
     {
       name: '自定义组件',
       total: 0,
+      factor: 80,
       scores: [
         !!window.customElements ^ 0,
         !!document.body.attachShadow ^ 0,
@@ -73,6 +81,7 @@ const store = reactive({
     {
       name: '图形图象支持',
       total: 0,
+      factor: 120,
       scores: [
         checkCanvas('2d'),
         checkCanvas('webgl'),
@@ -85,6 +94,7 @@ const store = reactive({
     {
       name: '网络',
       total: 0,
+      factor: 60,
       scores: [
         !!window.EventSource ^ 0,
         !!window.WebSocket ^ 0,
@@ -102,8 +112,7 @@ const store = reactive({
 })
 
 store.modules.forEach(it => (it.total = it.items.length))
-store.scores = store.modules.map(it => it.scores.sum()).sum()
-store.total = store.modules.map(it => it.total).sum()
+store.scores = store.modules.map(it => it.scores.sum() * it.factor).sum()
 
 export default function (app) {
   app.config.globalProperties.$store = store