Merge pull request #897 from streamplace/natb/embed-branding-web

feat: add branding tags on web

js/components/src/streamplace-store/branding.tsx

···
   });
 };
 
+const PropsInHeader = [
+  "siteTitle",
+  "siteDescription",
+  "primaryColor",
+  "accentColor",
+  "defaultStreamer",
+  "mainLogo",
+  "favicon",
+  "sidebarBg",
+  "legalLinks",
+];
+
+function getMetaContent(key: string): BrandingAsset | null {
+  if (typeof window === "undefined" || !window.document) return null;
+  const meta = document.querySelector(`meta[name="internal-brand:${key}`);
+  if (meta && meta.getAttribute("content")) {
+    let content = meta.getAttribute("content");
+    if (content) return JSON.parse(content) as BrandingAsset;
+  }
+
+  return null;
+}
+
 // hook to fetch broadcaster DID (unauthenticated)
 export function useFetchBroadcasterDID() {
   const streamplaceAgent = usePossiblyUnauthedPDSAgent();
   const store = getStreamplaceStoreFromContext();
+
+  // prefetch from meta records, if on web
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.document) {
+      try {
+        const metaRecords = PropsInHeader.reduce(
+          (acc, key) => {
+            const meta = document.querySelector(
+              `meta[name="internal-brand:${key}`,
+            );
+            // hrmmmmmmmmmmmm
+            if (meta && meta.getAttribute("content")) {
+              let content = meta.getAttribute("content");
+              if (content) acc[key] = JSON.parse(content) as BrandingAsset;
+            }
+            return acc;
+          },
+          {} as Record<string, BrandingAsset>,
+        );
+
+        console.log("Found meta records for broadcaster DID:", metaRecords);
+        // filter out all non-text values, can get on second fetch?
+        for (const key of Object.keys(metaRecords)) {
+          if (metaRecords[key].mimeType != "text/plain") {
+            delete metaRecords[key];
+          }
+        }
+      } catch (e) {
+        console.warn("Failed to parse broadcaster DID from meta tags", e);
+      }
+    }
+  }, []);
 
   return useCallback(async () => {
     try {
···
 
 // hook to get a specific branding asset by key
 export function useBrandingAsset(key: string): BrandingAsset | undefined {
-  return useStreamplaceStore((state) => state.branding?.[key]);
+  return (
+    useStreamplaceStore((state) => state.branding?.[key]) ||
+    getMetaContent(key) ||
+    undefined
+  );
 }
 
 // convenience hook for main logo

pkg/api/api.go

···
 		if err != nil {
 			return nil, err
 		}
-		linker, err := linking.NewLinker(ctx, bs)
+		linker, err := linking.NewLinker(ctx, bs, a.StatefulDB, a.CLI)
 		if err != nil {
 			return nil, err
 		}

pkg/linking/linking.go

···
 import (
 	"bytes"
 	"context"
+	"encoding/json"
 	"errors"
 	"fmt"
+	"log"
 	"net/url"
 
 	"golang.org/x/net/html"
+	"stream.place/streamplace/pkg/config"
+	"stream.place/streamplace/pkg/statedb"
 	"stream.place/streamplace/pkg/streamplace"
 )
 
 type Linker struct {
 	BaseHTML []byte
+	sdb      *statedb.StatefulDB
+	cli      *config.CLI
 }
 
-func NewLinker(ctx context.Context, baseHTML []byte) (*Linker, error) {
+func NewLinker(ctx context.Context, baseHTML []byte, sdb *statedb.StatefulDB, cli *config.CLI) (*Linker, error) {
 	_, err := html.Parse(bytes.NewReader(baseHTML))
 	if err != nil {
 		return nil, err
 	}
 
-	return &Linker{BaseHTML: baseHTML}, nil
+	return &Linker{BaseHTML: baseHTML, sdb: sdb, cli: cli}, nil
 }
 
 type PageConfig struct {
 	Title     string
 	Metas     []MetaTag
 	SentryDSN string
+	Branding  []string
 }
 
 // Define all meta tags in a structured way
···
 	Content string
 }
 
+var BrandingAssetList = [...]string{
+	"siteTitle",
+	"siteDescription",
+	"primaryColor",
+	"accentColor",
+	"defaultStreamer",
+	"mainLogo",
+	"favicon",
+	"sidebarBg",
+	"legalLinks",
+}
+
+// fetch branding assets for a given broadcaster DID
+func (l *Linker) getBrandingAssets(broadcasterDid string) ([]streamplace.BrandingGetBranding_BrandingAsset, error) {
+	ret := make([]streamplace.BrandingGetBranding_BrandingAsset, 0)
+	for _, asset := range BrandingAssetList {
+		blob, err := l.sdb.GetBrandingBlob(broadcasterDid, asset)
+		if err != nil {
+			// this can probably include a 'record not found' error, in which case we skip
+			log.Printf("error fetching branding asset %s for broadcaster %s: %v", asset, broadcasterDid, err)
+			continue
+		}
+		asset := streamplace.BrandingGetBranding_BrandingAsset{
+			Key:      blob.Key,
+			MimeType: blob.MimeType,
+		}
+
+		if blob.Width != nil {
+			w := int64(*blob.Width)
+			asset.Width = &w
+		}
+		if blob.Height != nil {
+			h := int64(*blob.Height)
+			asset.Height = &h
+		}
+
+		// process based on mime type
+		if blob.MimeType == "text/plain" {
+			str := string(blob.Data)
+			asset.Data = &str
+		} else {
+			url := fmt.Sprintf("/xrpc/place.stream.branding.getBlob?key=%s&broadcaster=%s", blob.Key, broadcasterDid)
+			asset.Url = &url
+		}
+		ret = append(ret, asset)
+	}
+
+	return ret, nil
+}
+
 func (l *Linker) GenerateStreamerCard(ctx context.Context, u *url.URL, lsv *streamplace.Livestream_LivestreamView, sentryDSN string) ([]byte, error) {
 	if u == nil {
 		return nil, errors.New("url is nil")
···
 		return nil, errors.New("livestream view is not a livestream")
 	}
 
-	titleStr := fmt.Sprintf("@%s's livestream on %s", lsv.Author.Handle, u.Host)
+	titleStr := fmt.Sprintf("@%s's livestream on ", lsv.Author.Handle)
 	outURL := u.String()
-
-	pageTitle := fmt.Sprintf("@%s | %s", lsv.Author.Handle, u.Host)
 
 	thumbURL, _ := url.Parse(u.String())
 	thumbURL.Path = "/xrpc/place.stream.live.getProfileCard"
···
 		// Facebook Meta Tags
 		{Type: "property", Key: "og:url", Content: u.String()},
 		{Type: "property", Key: "og:type", Content: "website"},
-		{Type: "property", Key: "og:title", Content: titleStr},
 		{Type: "property", Key: "og:description", Content: ls.Title},
 		{Type: "property", Key: "og:image", Content: thumbURL.String()},
 
···
 		{Type: "name", Key: "twitter:card", Content: "summary_large_image"},
 		{Type: "property", Key: "twitter:domain", Content: u.Host},
 		{Type: "property", Key: "twitter:url", Content: outURL},
-		{Type: "name", Key: "twitter:title", Content: titleStr},
 		{Type: "name", Key: "twitter:description", Content: ls.Title},
 		{Type: "name", Key: "twitter:image", Content: thumbURL.String()},
 	}
+	brandingTitle := "streamplace node"
+	if l.sdb != nil && l.cli != nil {
+		branding, err := l.getBrandingAssets("did:web:" + l.cli.BroadcasterHost)
+		if err == nil {
+			for i := range branding {
+				val := branding[i]
+				if val.Key == "siteTitle" && val.Data != nil {
+					brandingTitle = *val.Data
+				}
+				marshalledJson, err := json.Marshal(val)
+				if err != nil {
+					fmt.Printf("error marshalling branding asset %s: %v\n", val.Key, err)
+					continue
+				}
+				metaTags = append(metaTags, MetaTag{
+					Type:    "name",
+					Key:     "internal-brand:" + val.Key,
+					Content: string(marshalledJson),
+				})
+			}
+		} else {
+			// log but we should not block rendering
+			fmt.Printf("error fetching branding assets: %v\n", err)
+		}
+	}
+
+	// do twitter/og title after
+	metaTags = append(metaTags, MetaTag{
+		Type:    "property",
+		Key:     "og:title",
+		Content: fmt.Sprintf("%s%s", titleStr, brandingTitle),
+	})
+	metaTags = append(metaTags, MetaTag{
+		Type:    "name",
+		Key:     "twitter:title",
+		Content: fmt.Sprintf("%s%s", titleStr, brandingTitle),
+	})
 
 	return l.GenerateHTML(ctx, &PageConfig{
-		Title:     pageTitle,
+		Title:     fmt.Sprintf("%s%s", titleStr, brandingTitle),
 		Metas:     metaTags,
 		SentryDSN: sentryDSN,
 	})
···
 		{Type: "property", Key: "og:url", Content: u.String()},
 		{Type: "property", Key: "og:type", Content: "website"},
 		{Type: "property", Key: "og:title", Content: "Stream.place"},
-		{Type: "property", Key: "og:description", Content: "Stream.place is open-source livestreaming on the AT Protocol."},
+		{Type: "property", Key: "og:description", Content: "Open-source livestreaming on the AT Protocol."},
 		{Type: "property", Key: "og:image", Content: thumbURL.String()},
 
 		// Twitter Meta Tags
···
 		{Type: "property", Key: "twitter:domain", Content: u.Host},
 		{Type: "property", Key: "twitter:url", Content: u.String()},
 		{Type: "name", Key: "twitter:title", Content: "Stream.place"},
-		{Type: "name", Key: "twitter:description", Content: "Stream.place is open-source livestreaming on the AT Protocol."},
+		{Type: "name", Key: "twitter:description", Content: "Open-source livestreaming on the AT Protocol."},
 		{Type: "name", Key: "twitter:image", Content: thumbURL.String()},
 	}
 
+	brandingTitle := "streamplace node"
+	if l.sdb != nil && l.cli != nil {
+		branding, err := l.getBrandingAssets("did:web:" + l.cli.BroadcasterHost)
+		if err == nil {
+			for i := range branding {
+				val := branding[i]
+				if val.Key == "siteTitle" && val.Data != nil {
+					brandingTitle = *val.Data
+				}
+				marshalledJson, err := json.Marshal(val)
+				if err != nil {
+					fmt.Printf("error marshalling branding asset %s: %v\n", val.Key, err)
+					continue
+				}
+				metaTags = append(metaTags, MetaTag{
+					Type:    "name",
+					Key:     "internal-brand:" + val.Key,
+					Content: string(marshalledJson),
+				})
+			}
+		} else {
+			// log but we should not block rendering
+			fmt.Printf("error fetching branding assets: %v\n", err)
+		}
+	}
+
+	// do twitter/og title after
+	metaTags = append(metaTags, MetaTag{
+		Type:    "property",
+		Key:     "og:title",
+		Content: brandingTitle,
+	})
+	metaTags = append(metaTags, MetaTag{
+		Type:    "name",
+		Key:     "twitter:title",
+		Content: brandingTitle,
+	})
+
 	return l.GenerateHTML(ctx, &PageConfig{
-		Title:     "Stream.place",
+		Title:     brandingTitle,
 		Metas:     metaTags,
 		SentryDSN: sentryDSN,
 	})

pkg/linking/linking_test.go

···
 
 func TestNewLinker(t *testing.T) {
 	index := IndexHTML(t)
-	linker, err := NewLinker(context.Background(), index)
+	linker, err := NewLinker(context.Background(), index, nil, nil)
 	require.NoError(t, err)
 	require.NotNil(t, linker)
 }
 
 func TestGenerateLinkCard(t *testing.T) {
 	index := IndexHTML(t)
-	linker, err := NewLinker(context.Background(), index)
+	linker, err := NewLinker(context.Background(), index, nil, nil)
 	require.NoError(t, err)
 	require.NotNil(t, linker)
 

pkg/spxrpc/place_stream_branding.go

···
 	return s.cli.BroadcasterHost
 }
 
-func (s *Server) getBrandingBlob(ctx context.Context, broadcasterID, key string) ([]byte, string, *int, *int, error) {
+func (s *Server) GetBrandingBlob(ctx context.Context, broadcasterID, key string) ([]byte, string, *int, *int, error) {
 	// cache miss - fetch from db
 	blob, err := s.statefulDB.GetBrandingBlob(broadcasterID, key)
 	if err == gorm.ErrRecordNotFound {
···
 // HandlePlaceStreamBrandingGetBlobDirect is the exported version for direct calls
 func (s *Server) HandlePlaceStreamBrandingGetBlobDirect(ctx context.Context, broadcasterDID string, key string) (io.Reader, error) {
 	broadcasterID := s.getBroadcasterID(ctx, broadcasterDID)
-	data, _, _, _, err := s.getBrandingBlob(ctx, broadcasterID, key)
+	data, _, _, _, err := s.GetBrandingBlob(ctx, broadcasterID, key)
 	if err != nil {
 		return nil, err
 	}
···
 	// build output
 	assets := make([]*placestreamtypes.BrandingGetBranding_BrandingAsset, 0, len(allKeys))
 	for key := range allKeys {
-		data, mimeType, width, height, err := s.getBrandingBlob(ctx, broadcasterID, key)
+		data, mimeType, width, height, err := s.GetBrandingBlob(ctx, broadcasterID, key)
 		if err != nil {
 			continue // skip if error
 		}
···
 
 	broadcasterID := s.cli.BroadcasterHost
 	log.Log(ctx, "fetching favicon", "broadcasterID", broadcasterID)
-	data, mimeType, _, _, err := s.getBrandingBlob(ctx, "did:web:"+broadcasterID, "favicon")
+	data, mimeType, _, _, err := s.GetBrandingBlob(ctx, "did:web:"+broadcasterID, "favicon")
 
 	if err != nil || data == nil {
 		log.Log(ctx, "using fallback favicon", "err", err, "data_nil", data == nil)