From 9ffb751e5a9d4a036bc3b437083e8a251d843fc6 Mon Sep 17 00:00:00 2001 From: Brian Engert Date: Tue, 8 Nov 2022 08:19:15 -0600 Subject: [PATCH] fix: icons for video playback --- package-lock.json | 11 ----------- package.json | 1 - src/app.css | 19 ++++++++----------- src/components/VideoJS.tsx | 1 - 4 files changed, 8 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6f51729..4266749 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "react-dom": "^17.0.2", "react-router-dom": "^6.2.2", "video.js": "^7.20.3", - "videojs-font": "^4.0.0", "videojs-seek-buttons": "^3.0.1", "zod": "^3.19.1" }, @@ -6634,11 +6633,6 @@ "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz", "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==" }, - "node_modules/videojs-font": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.0.0.tgz", - "integrity": "sha512-sRXrizXF0zBMatXjg2vGpn63G26uH3XqwyZ9PjU2H9xqGm7fRSVYuxOJCUME6us/1rFl9yxkRKk31WTQ7XZkww==" - }, "node_modules/videojs-seek-buttons": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/videojs-seek-buttons/-/videojs-seek-buttons-3.0.1.tgz", @@ -11603,11 +11597,6 @@ } } }, - "videojs-font": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.0.0.tgz", - "integrity": "sha512-sRXrizXF0zBMatXjg2vGpn63G26uH3XqwyZ9PjU2H9xqGm7fRSVYuxOJCUME6us/1rFl9yxkRKk31WTQ7XZkww==" - }, "videojs-seek-buttons": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/videojs-seek-buttons/-/videojs-seek-buttons-3.0.1.tgz", diff --git a/package.json b/package.json index 20a3a0c..a8e8a82 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "react-dom": "^17.0.2", "react-router-dom": "^6.2.2", "video.js": "^7.20.3", - "videojs-font": "^4.0.0", "videojs-seek-buttons": "^3.0.1", "zod": "^3.19.1" } diff --git a/src/app.css b/src/app.css index 92243c7..c1572ae 100644 --- a/src/app.css +++ b/src/app.css @@ -1,18 +1,15 @@ button.vjs-seek-button.skip-back { - font-family: VideoJS; - font-weight: normal; - font-style: normal; + background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='20px' version='1.1' viewBox='0 0 16 20' width='16px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle/%3E%3Cdesc/%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-width='1'%3E%3Cg fill='%23ffffff' id='Icons-AV' transform='translate(-2.000000 -127.000000)'%3E%3Cg id='replay' transform='translate(2.000000 127.000000)'%3E%3Cpath d='M8 4 L8 0 L3 5 L8 10 L8 6 C11.3 6 14 8.7 14 12 C14 15.3 11.3 18 8 18 C4.7 18 2 15.3 2 12 L0 12 C0 16.4 3.6 20 8 20 C12.4 20 16 16.4 16 12 C16 7.6 12.4 4 8 4 L8 4 Z' id='Shape'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + background-size: 90% 90%; + background-repeat: no-repeat; cursor: pointer; } -button.vjs-seek-button.skip-back :before { - content: "\f11b"; } + button.vjs-seek-button.skip-forward { - font-family: VideoJS; - font-weight: normal; - font-style: normal; + background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='20px' version='1.1' viewBox='0 0 16 20' width='16px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle/%3E%3Cdesc/%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd' id='Page-1' stroke='none' stroke-width='1'%3E%3Cg fill='%23ffffff' id='Icons-AV' transform='translate(-2.000000 -127.000000)'%3E%3Cg id='replay' transform='translate(2.000000 127.000000)'%3E%3Cpath d='M8 4 L8 0 L3 5 L8 10 L8 6 C11.3 6 14 8.7 14 12 C14 15.3 11.3 18 8 18 C4.7 18 2 15.3 2 12 L0 12 C0 16.4 3.6 20 8 20 C12.4 20 16 16.4 16 12 C16 7.6 12.4 4 8 4 L8 4 Z' id='Shape'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + transform: scaleX(-1); + background-size: 90% 90%; + background-repeat: no-repeat; cursor: pointer; } -button.vjs-seek-button.skip-forward :before { - content: "\f121"; -} \ No newline at end of file diff --git a/src/components/VideoJS.tsx b/src/components/VideoJS.tsx index 3af3854..5c03b6c 100644 --- a/src/components/VideoJS.tsx +++ b/src/components/VideoJS.tsx @@ -2,7 +2,6 @@ import { useEffect, useRef } from 'react'; import videojs from 'video.js'; import seekButtons from 'videojs-seek-buttons'; import 'video.js/dist/video-js.css'; -import 'videojs-font/css/videojs-icons.css'; type Props = { options : videojs.PlayerOptions;