add sizing support for embed

assets/src/js/app/embed/check.js

@@ -1,21 +1,27 @@
 import message from './message';
 const sha1 = require('sha1');
-
-function setWidth() {
-    const width = document.body.offsetWidth;
-    const height = width/16*9;
-    document.body.style.height = height + 'px';
-}
-setWidth();
-window.addEventListener('resize', setWidth);
-window.addEventListener('click', async () => {
-    message.send('init');
-    const init = await message.receiveOnce('init');
-    const c = await check();
-    if (c) {
-        initEmbed(init);
+message.send('init');
+const init = await message.receiveOnce('init');
+const c = await check();
+if (c) {
+    if (!init.height) {
+        function setHeight() {
+            const width = document.body.offsetWidth;
+            const height = width/16*9;
+            document.body.style.height = height + 'px';
+        }
+        window.addEventListener('resize', setHeight);
+        const s = document.createElement('script');
+        s.src = 'assets/lib/iframeResizer.contentWindow.min.js';
+        document.body.appendChild(s);
+        setHeight();
+    } else {
+        document.body.style.height = init.height;
     }
-});
+    window.addEventListener('click', async () => {
+        initEmbed(init);
+    }, {once: true});
+}
 
 async function check() {
     message.send('inject', window._checkScript);

assets/src/js/app/embed/index.js

@@ -1,12 +1,10 @@
 import '../../../styles/embed.css';
 
-function setWidth() {
+function setHeight() {
     const width = document.body.offsetWidth;
     const height = width/16*9;
     document.body.style.height = height + 'px';
 }
-setWidth();
-window.addEventListener('resize', setWidth);
 
 window.addEventListener('load', async () => {
     const progress = document.querySelector('.progress-alert');
@@ -15,8 +13,8 @@ window.addEventListener('load', async () => {
     initProgressLog(progress, function(ev) {
         if (ev.level != 'rendertemplate') return;
         window.addEventListener('player_ready', function(e) {
-            window.removeEventListener('resize', setWidth);
-            document.body.style.height = 'auto';
+            window.removeEventListener('resize', setHeight);
+            // document.body.style.height = 'auto';
             progress.classList.add('hidden');
             el.classList.remove('hidden');
         }, {once: true});
@@ -25,4 +23,11 @@ window.addEventListener('load', async () => {
         document.body.appendChild(el);
         ev.render(el);
     });
+    if (!window._settings.height) {
+        const s = document.createElement('script');
+        s.src = 'assets/lib/iframeResizer.contentWindow.min.js';
+        document.body.appendChild(s);
+    }
+    setHeight();
+    window.addEventListener('resize', setHeight);
 });

assets/src/js/lib/mediaelement.js

@@ -86,6 +86,14 @@ let video;
 
 export function initPlayer(target, ready) {
     video = target.querySelector('.player');
+    const width = window._settings?.width;
+    const height = window._settings?.height;
+    const stretching = height ? 'auto' : 'responsive';
+    if (stretching == 'auto') {
+        if (width) video.setAttribute('width', width);
+        if (height) video.setAttribute('height', height);
+    }
+    console.log(width, height, stretching);
     const duration = video.getAttribute('data-duration') ? parseFloat(video.getAttribute('data-duration')) : -1;
     const features = [
         'playpause',
@@ -103,8 +111,8 @@ export function initPlayer(target, ready) {
         autoRewind: false,
         defaultSeekBackwardInterval: (media) => 15,
         defaultSeekForwardInterval: (media) => 15,
-        stretching: 'responsive',
         iconSprite: 'assets/mejs-controls.svg',
+        stretching,
         features,
         hls: {
             // debug: true,
@@ -143,12 +151,17 @@ export function initPlayer(target, ready) {
                 }
             }
             media.addEventListener('canplay', () => {
+
                 if (hlsPlayer && document.getElementById('subtitles')) {
                     const audioId = document.querySelector('.audio[data-default=true]').getAttribute('data-mp-id');
                     const subId = document.querySelector('.subtitle[data-default=true]').getAttribute('data-mp-id');
                     if (audioId) hlsPlayer.audioTrack = audioId;
                     if (subId) hlsPlayer.subtitleTrack = subId;
                 }
+                if (stretching != 'responsive') {
+                    if (width) player.node.style.width = width;
+                    if (height) player.node.style.height = height;
+                }
                 ready();
             });
             if (media.hlsPlayer) {

go.mod

@@ -110,6 +110,7 @@ require (
 	github.com/webtor-io/lazymap v0.0.0-20221030185154-1799721becef // indirect
 	github.com/webtor-io/magnet2torrent v0.0.0-20220312143110-bc1a7e4bcbba // indirect
 	github.com/webtor-io/torrent-store v0.0.0-20230129225621-aec101523586 // indirect
+	github.com/yargevad/filepathx v1.0.0 // indirect
 	golang.org/x/arch v0.6.0 // indirect
 	golang.org/x/crypto v0.22.0 // indirect
 	golang.org/x/net v0.24.0 // indirect

go.sum

@@ -591,6 +591,8 @@ github.com/willf/bitset v1.1.10/go.mod h1:RjeCKbqT1RxIR/KWY6phxZiaY1IyutSBfGjNPy
 github.com/willf/bitset v1.1.11/go.mod h1:83CECat5yLh5zVOf4P1ErAgKA5UDvKtgyUABdr3+MjI=
 github.com/willf/bloom v0.0.0-20170505221640-54e3b963ee16/go.mod h1:MmAltL9pDMNTrvUkxdg0k0q5I0suxmuwp3KbyrZLOZ8=
 github.com/willf/bloom v2.0.3+incompatible/go.mod h1:MmAltL9pDMNTrvUkxdg0k0q5I0suxmuwp3KbyrZLOZ8=
+github.com/yargevad/filepathx v1.0.0 h1:SYcT+N3tYGi+NvazubCNlvgIPbzAk7i7y2dwg3I5FYc=
+github.com/yargevad/filepathx v1.0.0/go.mod h1:BprfX/gpYNJHJfc35GjRRpVcwWXS89gGulUIU5tK3tA=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.3.5/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=

serve.go

@@ -19,6 +19,7 @@ import (
 	wa "github.com/webtor-io/web-ui-v2/services/web/action"
 	wau "github.com/webtor-io/web-ui-v2/services/web/auth"
 	we "github.com/webtor-io/web-ui-v2/services/web/embed"
+	wee "github.com/webtor-io/web-ui-v2/services/web/embed/example"
 	wi "github.com/webtor-io/web-ui-v2/services/web/index"
 	wj "github.com/webtor-io/web-ui-v2/services/web/job"
 	wm "github.com/webtor-io/web-ui-v2/services/web/migration"
@@ -133,6 +134,9 @@ func serve(c *cli.Context) error {
 	// Setting ProfileHandler
 	p.RegisterHandler(c, r, tm)
 
+	// Setting EmbedExamplesHandler
+	wee.RegisterHandler(c, r, tm)
+
 	// Setting EmbedHandler
 	we.RegisterHandler(c, r, tm, jobs)
 

services/template/template.go

@@ -18,6 +18,8 @@ import (
 	"github.com/gin-gonic/gin/render"
 
 	"github.com/gin-contrib/multitemplate"
+
+	"github.com/yargevad/filepathx"
 )
 
 type FuncMap = template.FuncMap
@@ -100,13 +102,15 @@ type Manager struct {
 	partials       []string
 	views          []*View
 	mux            sync.Mutex
+	base           string
 }
 
 func NewManager(re multitemplate.Renderer) *Manager {
 	return &Manager{
 		re:             re,
 		funcs:          FuncMap{},
 		contextWrapper: NewContext,
+		base:           "templates/",
 	}
 }
 
@@ -120,7 +124,7 @@ func (s *Manager) MustRegisterViews(pattern string) *Manager {
 
 func (s *Manager) RegisterViews(pattern string) (m *Manager, err error) {
 	m = s
-	views, err := filepath.Glob("templates/views/" + pattern)
+	views, err := s.getFiles("views/" + pattern)
 	if err != nil {
 		return
 	}
@@ -133,10 +137,6 @@ func (s *Manager) RegisterViews(pattern string) (m *Manager, err error) {
 		return
 	}
 	for _, v := range views {
-		f, _ := os.Stat(v)
-		if f.IsDir() {
-			continue
-		}
 		s.views = append(s.views, s.makeView(v, "", partials, s.funcs))
 		for _, l := range layouts {
 			s.views = append(s.views, s.makeView(v, l, partials, s.funcs))
@@ -146,14 +146,31 @@ func (s *Manager) RegisterViews(pattern string) (m *Manager, err error) {
 	return
 }
 
+func (s *Manager) getFiles(pattern string) ([]string, error) {
+	g, err := filepathx.Glob(s.base + pattern)
+	if err != nil {
+		return nil, err
+	}
+	res := []string{}
+	for _, l := range g {
+		f, _ := os.Stat(l)
+		if f.IsDir() {
+			continue
+		}
+		res = append(res, l)
+	}
+	return res, nil
+}
+
 func (s *Manager) GetLayouts() ([]string, error) {
 	if s.layouts != nil {
 		return s.layouts, nil
 	}
-	layouts, err := filepath.Glob("templates/layouts/*")
+	layouts, err := s.getFiles("layouts/**/*")
 	if err != nil {
 		return nil, err
 	}
+
 	s.layouts = layouts
 	return layouts, nil
 }
@@ -162,7 +179,7 @@ func (s *Manager) GetPartials() ([]string, error) {
 	if s.partials != nil {
 		return s.partials, nil
 	}
-	partials, err := filepath.Glob("templates/partials/*")
+	partials, err := s.getFiles("partials/**")
 	if err != nil {
 		return nil, err
 	}
@@ -171,8 +188,8 @@ func (s *Manager) GetPartials() ([]string, error) {
 }
 
 func (s *Manager) makeView(view string, layout string, partials []string, funcs FuncMap) *View {
-	lName := fileNameWithoutExt(filepath.Base(layout))
-	vName := fileNameWithoutExt(strings.TrimPrefix(view, "templates/views/"))
+	lName := fileNameWithoutExt(strings.TrimPrefix(layout, s.base+"layouts/"))
+	vName := fileNameWithoutExt(strings.TrimPrefix(view, s.base+"views/"))
 	return &View{
 		re:         s.re,
 		Name:       vName,

services/web/embed/example/handler.go

@@ -0,0 +1,28 @@
+package example
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+	"github.com/urfave/cli"
+	"github.com/webtor-io/web-ui-v2/services/template"
+)
+
+type Handler struct {
+	tb template.Builder
+}
+
+func RegisterHandler(c *cli.Context, r *gin.Engine, tm *template.Manager) {
+	h := &Handler{
+		tb: tm.MustRegisterViews("embed/example/*").WithLayout("embed/example"),
+	}
+
+	r.GET("/embed/example/:name", h.get)
+}
+
+type ExampleData struct {
+}
+
+func (s *Handler) get(c *gin.Context) {
+	s.tb.Build("embed/example/"+c.Param("name")).HTML(http.StatusOK, c, &ExampleData{})
+}

services/web/embed/handler.go

@@ -19,5 +19,4 @@ func RegisterHandler(c *cli.Context, r *gin.Engine, tm *template.Manager, jobs *
 	}
 	r.GET("/embed", h.get)
 	r.POST("/embed", h.post)
-	r.GET("/embed/example", h.example)
 }

services/web/helper.go

@@ -3,7 +3,9 @@ package web
 import (
 	"crypto/md5"
 	"encoding/hex"
+	"encoding/json"
 	"fmt"
+	"html/template"
 	"io"
 	"os"
 	"reflect"
@@ -84,8 +86,8 @@ func (s *Helper) Domain() string {
 	return s.domain
 }
 
-func (s *Helper) DemoMagnet() string {
-	return s.demoMagnet
+func (s *Helper) DemoMagnet() template.URL {
+	return template.URL(s.demoMagnet)
 }
 
 func (s *Helper) IsDemoMagnet(m string) bool {
@@ -96,6 +98,11 @@ func (s *Helper) Obfuscate(in string) string {
 	return obfuscator.Obfuscate(in)
 }
 
+func (s *Helper) Json(in any) template.JS {
+	out, _ := json.Marshal(in)
+	return template.JS(out)
+}
+
 func (s *Helper) Asset(in string) string {
 	path := s.assetsHost + "/assets/" + in
 	if !s.Dev() {

services/web/resource/helpers.go

@@ -7,7 +7,6 @@ import (
 	h "github.com/dustin/go-humanize"
 	"github.com/urfave/cli"
 	ra "github.com/webtor-io/rest-api/services"
-	"github.com/webtor-io/web-ui-v2/services"
 	w "github.com/webtor-io/web-ui-v2/services/web"
 )
 
@@ -166,11 +165,8 @@ func (s *Helper) MakePagination(lr *ra.ListResponse, page uint, pageSize uint) [
 }
 
 type Helper struct {
-	dm string
 }
 
 func NewHelper(c *cli.Context) *Helper {
-	return &Helper{
-		dm: c.String(services.DemoMagnetFlag),
-	}
+	return &Helper{}
 }

templates/views/embed/example.html → templates/layouts/embed/example.html

@@ -1,6 +1,5 @@
 <!doctype html>
 <html>
-
 <head>
     <title>Webtor Player SDK Example</title>
     <meta charset="utf-8">
@@ -12,12 +11,12 @@
             padding: 0;
             overflow: hidden;
             width: 100%;
-            height: 100%;
+            height: 100vh;
         }
     </style>
 </head>
 <body>
-    <video src="magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel" controls width="100%" data-config='{"baseUrl": "{{ domain }}"}'></video>
+    {{ template "main" . }}
     <script src="https://cdn.jsdelivr.net/npm/@webtor/embed-sdk-js/dist/index.min.js" charset="utf-8" async></script>
 </body>
 </html>

templates/views/embed/example/basic.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+<video src="{{ demoMagnet }}" controls data-config='{"baseUrl": "{{ domain }}"}'></video>
+{{ end}}

templates/views/embed/example/fixed_size.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+<video src="{{ demoMagnet }}" controls data-config='{"baseUrl": "{{ domain }}"}' width="900px" height="300px"></video>
+{{ end}}

templates/views/embed/example/fixed_size2.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+<video src="{{ demoMagnet }}" controls data-config='{"baseUrl": "{{ domain }}"}' width="400px" height="700px"></video>
+{{ end}}