Merge pull request #259 from openzim/setup-ogvjs

Add support for ogv.js in video player

CHANGELOG

@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add playlist panel for playing videos in a playlist (#216)
 - Remove `--autoplay` CLI argument and set autoplay to always be true (#233)
 - Add playlist view page in new Vue.js UI (#223)
+- Add support for ogv.js in video-js player (#230)
+- Remove openzim.toml and install all dependencies using Yarn (#218)
 
 ## [2.3.0] - 2024-05-22
 

Dockerfile

@@ -27,7 +27,7 @@ WORKDIR /output
 
 # Copy pyproject.toml and its dependencies
 COPY README.md /src/
-COPY scraper/pyproject.toml scraper/openzim.toml /src/scraper/
+COPY scraper/pyproject.toml /src/scraper/
 COPY scraper/src/youtube2zim/__about__.py /src/scraper/src/youtube2zim/__about__.py
 
 # Install Python dependencies

scraper/pyproject.toml

@@ -28,9 +28,6 @@ allow-direct-references = true
 kind = "scraper"
 additional-keywords = ["youtube"]
 
-[tool.hatch.build.hooks.openzim-build]
-dependencies = [ "zimscraperlib==3.4.0"] # required for fix_ogv_dist
-
 [project.optional-dependencies]
 scripts = ["invoke==2.2.0"]
 lint = ["black==24.4.2", "ruff==0.4.10"]

scraper/src/youtube2zim/scraper.py

@@ -22,7 +22,6 @@
 from kiwixstorage import KiwixStorage
 from pif import get_public_ip
 from zimscraperlib.download import stream_file
-from zimscraperlib.fix_ogvjs_dist import fix_source_dir
 from zimscraperlib.i18n import NotFound, get_language_details
 from zimscraperlib.image.convertion import convert_image
 from zimscraperlib.image.presets import WebpHigh
@@ -190,18 +189,6 @@ def __init__(
     def root_dir(self):
         return ROOT_DIR
 
-    @property
-    def templates_dir(self):
-        return self.root_dir.joinpath("templates")
-
-    @property
-    def assets_src_dir(self):
-        return self.templates_dir.joinpath("assets")
-
-    @property
-    def assets_dir(self):
-        return self.build_dir.joinpath("assets")
-
     @property
     def channels_dir(self):
         return self.build_dir.joinpath("channels")
@@ -488,11 +475,6 @@ def validate_id(self):
     def prepare_build_folder(self):
         """prepare build folder before we start downloading data"""
 
-        # copy assets
-        shutil.copytree(self.assets_src_dir, self.assets_dir)
-
-        fix_source_dir(self.assets_dir)
-
         # cache folder to store youtube-api results
         self.cache_dir.mkdir(exist_ok=True)
 

zimui/package.json

@@ -2,6 +2,7 @@
   "name": "zimui",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -41,9 +42,11 @@
     "eslint-plugin-vue": "^9.23.0",
     "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.2",
+    "ogv": "^1.9.0",
     "prettier": "^3.2.5",
     "typescript": "~5.4.0",
     "vite": "^5.2.8",
+    "vite-plugin-static-copy": "^1.0.5",
     "vitest": "^1.4.0",
     "vue-tsc": "^2.0.11"
   },

zimui/src/assets/vjs-youtube.css

@@ -8,7 +8,8 @@
   border-bottom-right-radius: 8px;
 }
 
-.vjs-youtube .vjs-poster img {
+.vjs-youtube .vjs-poster img,
+.vjs-youtube .ogvjs-poster {
   border-radius: 8px;
 }
 
@@ -47,3 +48,7 @@
   padding-left: 5px;
   border-radius: 8px;
 }
+
+.vjs-youtube .vjs-tech canvas {
+  border-radius: 8px;
+}

zimui/src/components/video/VideoPlayer.vue

@@ -5,6 +5,7 @@ import type Player from 'video.js/dist/types/player'
 
 import 'video.js/dist/video-js.css'
 import '@/assets/vjs-youtube.css'
+import '@/plugins/videojs-ogvjs.js'
 
 const props = defineProps({
   options: {