Moments - Web
Player Style - Moments
To get player style for Moments, add 'moment' when you create the Theme.
const myRowCircleMomentsTheme = BlazeSDK.Theme('row-circle', 'moment')
{
"headingText": {
"font": "'WSC Open Sans'",
"textSizeMobile": "16px",
"textSizeTablet": "17px",
"textSizeDesktop": "18px",
"textColor": "#F0F0F0",
"isVisible": false,
"contentSource": "TITLE",
"lineHeight": "1.5",
"textTransform": "none",
"fontWeight": "600"
},
"bodyText": {
"font": "'WSC Open Sans'",
"textSizeMobile": "14px",
"textSizeTablet": "15px",
"textSizeDesktop": "16px",
"textColor": "#F0F0F0",
"isVisible": true,
"contentSource": "TITLE",
"lineHeight": "1.5",
"textTransform": "none",
"fontWeight": "400"
},
"likeText": {
"font": "'WSC Open Sans'",
"textSizeMobile": "14px",
"textSizeTablet": "15px",
"textSizeDesktop": "16px",
"textColor": "#FFFFFF",
"fontWeight": "700",
"textTransform": "none",
"isVisible": true,
"lineHeight": "1"
},
"icons": {
"play": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBsYXlfYXJyb3dfIGhvbGxvdyI+CjxtYXNrIGlkPSJtYXNrMF8yMTA2Xzk5NCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgaWQ9IkJvdW5kaW5nIGJveCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yMTA2Xzk5NCkiPgo8cGF0aCBpZD0icGxheV9hcnJvdyIgZD0iTTggMTlWNUwxOSAxMkw4IDE5Wk0xMCAxNS4zNUwxNS4yNSAxMkwxMCA4LjY1VjE1LjM1WiIgZmlsbD0iI0YwRjBGMCIvPgo8L2c+CjwvZz4KPC9zdmc+Cg==",
"pause": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBhdXNlIj4KPG1hc2sgaWQ9Im1hc2swXzIxMTdfMiIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgaWQ9IkJvdW5kaW5nIGJveCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjkyIi8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yMTE3XzIpIj4KPHBhdGggaWQ9InBhdXNlXzIiIGQ9Ik0xNCAxOVY1SDE3VjE5SDE0Wk03IDE5VjVIMTBWMTlIN1oiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuOTIiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=",
"mute": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InZvbHVtZV9tdXRlIj4KPHBhdGggaWQ9InZvbHVtZV9vZmYiIGQ9Ik0xOS44IDIyLjZMMTYuNzc1IDE5LjU3NTFDMTYuMzU4NCAxOS44NDE3IDE1LjkxNjcgMjAuMDcwOSAxNS40NSAyMC4yNjI2QzE0Ljk4MzQgMjAuNDU0MiAxNC41IDIwLjYwODQgMTQgMjAuNzI1VjE4LjY3NUMxNC4yMzM0IDE4LjU5MTcgMTQuNDYyNSAxOC41MDg0IDE0LjY4NzUgMTguNDI1QzE0LjkxMjUgMTguMzQxNyAxNS4xMjUgMTguMjQxNyAxNS4zMjUgMTguMTI1MUwxMiAxNC44VjIwTDcuMDAwMDIgMTVIMy4wMDAwMlY5LjAwMDA1SDYuMjAwMDJMMS40MDAwMiA0LjIwMDA1TDIuODAwMDIgMi44MDAwNUwyMS4yIDIxLjIwMDFMMTkuOCAyMi42Wk0xOS42IDE2LjhMMTguMTUgMTUuMzVDMTguNDMzNCAxNC44MzM0IDE4LjY0NTkgMTQuMjkxNyAxOC43ODc1IDEzLjcyNUMxOC45MjkyIDEzLjE1ODQgMTkgMTIuNTc1MSAxOSAxMS45NzVDMTkgMTAuNDA4NCAxOC41NDE3IDkuMDA4MzggMTcuNjI1IDcuNzc1MDVDMTYuNzA4NCA2LjU0MTcyIDE1LjUgNS43MDgzOCAxNCA1LjI3NTA1VjMuMjI1MDVDMTYuMDY2NyAzLjY5MTcyIDE3Ljc1IDQuNzM3NTUgMTkuMDUgNi4zNjI1NUMyMC4zNSA3Ljk4NzU1IDIxIDkuODU4MzggMjEgMTEuOTc1QzIxIDEyLjg1ODQgMjAuODc5MiAxMy43MDg0IDIwLjYzNzUgMTQuNTI1MUMyMC4zOTU5IDE1LjM0MTcgMjAuMDUgMTYuMSAxOS42IDE2LjhaTTE2LjI1IDEzLjQ1TDE0IDExLjJWNy45NTAwNUMxNC43ODM0IDguMzE2NzIgMTUuMzk1OSA4Ljg2NjcyIDE1LjgzNzUgOS42MDAwNUMxNi4yNzkyIDEwLjMzMzQgMTYuNSAxMS4xMzM0IDE2LjUgMTJDMTYuNSAxMi4yNSAxNi40NzkyIDEyLjQ5NTkgMTYuNDM3NSAxMi43Mzc1QzE2LjM5NTkgMTIuOTc5MiAxNi4zMzM0IDEzLjIxNjcgMTYuMjUgMTMuNDVaTTEyIDkuMjAwMDVMOS40MDAwMyA2LjYwMDA1TDEyIDQuMDAwMDVWOS4yMDAwNVpNMTAgMTUuMTUwMVYxMi44TDguMjAwMDMgMTFINS4wMDAwMlYxM0g3Ljg1MDAzTDEwIDE1LjE1MDFaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjkyIi8+CjwvZz4KPC9zdmc+Cg==",
"unmute": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InZvbHVtZV91cF8yIj4KPG1hc2sgaWQ9Im1hc2swXzIxMDZfOTg3IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPgo8cmVjdCBpZD0iQm91bmRpbmcgYm94IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNEOUQ5RDkiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzIxMDZfOTg3KSI+CjxwYXRoIGlkPSJ2b2x1bWVfdXAiIGQ9Ik0xNCAyMC43MjVWMTguNjc1QzE1LjUgMTguMjQxNiAxNi43MDgzIDE3LjQwODMgMTcuNjI1IDE2LjE3NUMxOC41NDE3IDE0Ljk0MTYgMTkgMTMuNTQxNiAxOSAxMS45NzVDMTkgMTAuNDA4MyAxOC41NDE3IDkuMDA4MzEgMTcuNjI1IDcuNzc0OThDMTYuNzA4MyA2LjU0MTY0IDE1LjUgNS43MDgzMSAxNCA1LjI3NDk4VjMuMjI0OThDMTYuMDY2NyAzLjY5MTY0IDE3Ljc1IDQuNzM3NDggMTkuMDUgNi4zNjI0OEMyMC4zNSA3Ljk4NzQ4IDIxIDkuODU4MzEgMjEgMTEuOTc1QzIxIDE0LjA5MTYgMjAuMzUgMTUuOTYyNSAxOS4wNSAxNy41ODc1QzE3Ljc1IDE5LjIxMjUgMTYuMDY2NyAyMC4yNTgzIDE0IDIwLjcyNVpNMyAxNVY4Ljk5OTk4SDdMMTIgMy45OTk5OFYyMEw3IDE1SDNaTTE0IDE2VjcuOTQ5OThDMTQuNzgzMyA4LjMxNjY0IDE1LjM5NTggOC44NjY2NCAxNS44Mzc1IDkuNTk5OThDMTYuMjc5MiAxMC4zMzMzIDE2LjUgMTEuMTMzMyAxNi41IDEyQzE2LjUgMTIuODUgMTYuMjc5MiAxMy42Mzc1IDE1LjgzNzUgMTQuMzYyNUMxNS4zOTU4IDE1LjA4NzUgMTQuNzgzMyAxNS42MzMzIDE0IDE2Wk0xMCA4Ljg0OTk4TDcuODUgMTFINVYxM0g3Ljg1TDEwIDE1LjE1VjguODQ5OThaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjkyIi8+CjwvZz4KPC9nPgo8L3N2Zz4K",
"share": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InNoYXJlIj4KPHBhdGggaWQ9IlVuaW9uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjY0NzMgMjAuMzc0OEMxMi44IDIwLjc1MjcgMTMuMTY2OCAyMSAxMy41NzQ0IDIxSDEzLjYwNTJDMTQuMDIyOSAyMSAxNC4zOTY3IDIwLjc0MDQgMTQuNTQyNCAyMC4zNDg5TDIwLjIzNzUgNS4wNDg1NkMyMC41MzYyIDQuMjQ2MSAxOS43NTM5IDMuNDYzODUgMTguOTUxNSAzLjc2MjU0TDMuNjUxMTYgOS40NTc2NkMzLjI1OTY2IDkuNjAzMzggMyA5Ljk3NzEgMyAxMC4zOTQ4VjEwLjQyNTdDMyAxMC44MzMyIDMuMjQ3MzUgMTEuMiAzLjYyNTIxIDExLjM1MjhMMTAuMDUgMTMuOTVMMTIuNjQ3MyAyMC4zNzQ4Wk0xNi43NjM4IDguNjUwNDdMMTMuNTUgMTcuM0wxMi4wMDI2IDEzLjQxMTdMMTYuNzYzOCA4LjY1MDQ3Wk0xNS4zNDk3IDcuMjM2MTRMMTAuNTg4NCAxMS45OTc1TDYuNyAxMC40NUwxNS4zNDk3IDcuMjM2MTRaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjkyIi8+CjwvZz4KPC9zdmc+Cg==",
"exit": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNsb3NlIj4KPG1hc2sgaWQ9Im1hc2swXzIwODlfNjUxOCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2Ij4KPHJlY3QgaWQ9IkJvdW5kaW5nIGJveCIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjkyIi8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yMDg5XzY1MTgpIj4KPHBhdGggaWQ9ImNsb3NlXzIiIGQ9Ik05LjYgMjguNUw3LjUgMjYuNEwxNS45IDE4TDcuNSA5LjZMOS42IDcuNUwxOCAxNS45TDI2LjQgNy41TDI4LjUgOS42TDIwLjEgMThMMjguNSAyNi40TDI2LjQgMjguNUwxOCAyMC4xTDkuNiAyOC41WiIgZmlsbD0iI0YwRjBGMCIvPgo8L2c+CjwvZz4KPC9zdmc+Cg==",
"unlike": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyOCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjAwMDMgMjVMMTIuMDY3IDIzLjI2NjdDOS44MjI1NSAyMS4yNDQ1IDcuOTY2OTkgMTkuNSA2LjUwMDMzIDE4LjAzMzRDNS4wMzM2NiAxNi41NjY3IDMuODY2OTkgMTUuMjUgMy4wMDAzMyAxNC4wODM0QzIuMTMzNjYgMTIuOTE2NyAxLjUyODEgMTEuODQ0NSAxLjE4MzY2IDEwLjg2NjdDMC44MzkyMTQgOS44ODg5MSAwLjY2Njk5MiA4Ljg4ODkxIDAuNjY2OTkyIDcuODY2NjlDMC42NjY5OTIgNS43Nzc4IDEuMzY2OTkgNC4wMzMzNiAyLjc2Njk5IDIuNjMzMzZDNC4xNjY5OSAxLjIzMzM2IDUuOTExNDQgMC41MzMzNTYgOC4wMDAzMyAwLjUzMzM1NkM5LjE1NTg4IDAuNTMzMzU2IDEwLjI1NTkgMC43Nzc4IDExLjMwMDMgMS4yNjY2OUMxMi4zNDQ4IDEuNzU1NTggMTMuMjQ0OCAyLjQ0NDQ3IDE0LjAwMDMgMy4zMzMzNkMxNC43NTU5IDIuNDQ0NDcgMTUuNjU1OSAxLjc1NTU4IDE2LjcwMDMgMS4yNjY2OUMxNy43NDQ4IDAuNzc3OCAxOC44NDQ4IDAuNTMzMzU2IDIwLjAwMDMgMC41MzMzNTZDMjIuMDg5MiAwLjUzMzM1NiAyMy44MzM3IDEuMjMzMzYgMjUuMjMzNyAyLjYzMzM2QzI2LjYzMzcgNC4wMzMzNiAyNy4zMzM3IDUuNzc3OCAyNy4zMzM3IDcuODY2NjlDMjcuMzMzNyA4Ljg4ODkxIDI3LjE2MTQgOS44ODg5MSAyNi44MTcgMTAuODY2N0MyNi40NzI1IDExLjg0NDUgMjUuODY3IDEyLjkxNjcgMjUuMDAwMyAxNC4wODM0QzI0LjEzMzcgMTUuMjUgMjIuOTY3IDE2LjU2NjcgMjEuNTAwMyAxOC4wMzM0QzIwLjAzMzcgMTkuNSAxOC4xNzgxIDIxLjI0NDUgMTUuOTMzNyAyMy4yNjY3TDE0LjAwMDMgMjVaTTE0LjAwMDMgMjEuNEMxNi4xMzM3IDE5LjQ4ODkgMTcuODg5MiAxNy44NSAxOS4yNjcgMTYuNDgzNEMyMC42NDQ4IDE1LjExNjcgMjEuNzMzNyAxMy45Mjc4IDIyLjUzMzcgMTIuOTE2N0MyMy4zMzM3IDExLjkwNTYgMjMuODg5MiAxMS4wMDU2IDI0LjIwMDMgMTAuMjE2N0MyNC41MTE0IDkuNDI3OCAyNC42NjcgOC42NDQ0NyAyNC42NjcgNy44NjY2OUMyNC42NjcgNi41MzMzNiAyNC4yMjI1IDUuNDIyMjQgMjMuMzMzNyA0LjUzMzM2QzIyLjQ0NDggMy42NDQ0NyAyMS4zMzM3IDMuMjAwMDIgMjAuMDAwMyAzLjIwMDAyQzE4Ljk1NTkgMy4yMDAwMiAxNy45ODkyIDMuNDk0NDcgMTcuMTAwMyA0LjA4MzM2QzE2LjIxMTQgNC42NzIyNSAxNS42MDAzIDUuNDIyMjQgMTUuMjY3IDYuMzMzMzZIMTIuNzMzN0MxMi40MDAzIDUuNDIyMjQgMTEuNzg5MiA0LjY3MjI1IDEwLjkwMDMgNC4wODMzNkMxMC4wMTE0IDMuNDk0NDcgOS4wNDQ3NyAzLjIwMDAyIDguMDAwMzMgMy4yMDAwMkM2LjY2Njk5IDMuMjAwMDIgNS41NTU4OCAzLjY0NDQ3IDQuNjY2OTkgNC41MzMzNkMzLjc3ODEgNS40MjIyNCAzLjMzMzY2IDYuNTMzMzYgMy4zMzM2NiA3Ljg2NjY5QzMuMzMzNjYgOC42NDQ0NyAzLjQ4OTIxIDkuNDI3OCAzLjgwMDMzIDEwLjIxNjdDNC4xMTE0NCAxMS4wMDU2IDQuNjY2OTkgMTEuOTA1NiA1LjQ2Njk5IDEyLjkxNjdDNi4yNjY5OSAxMy45Mjc4IDcuMzU1ODggMTUuMTE2NyA4LjczMzY2IDE2LjQ4MzRDMTAuMTExNCAxNy44NSAxMS44NjcgMTkuNDg4OSAxNC4wMDAzIDIxLjRaIiBmaWxsPSIjRjBGMEYwIi8+Cjwvc3ZnPgo=",
"like": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDE4Ljk5OTlMOC41NSAxNy42OTk5QzYuODY2NjcgMTYuMTgzMiA1LjQ3NSAxNC44NzQ5IDQuMzc1IDEzLjc3NDlDMy4yNzUgMTIuNjc0OSAyLjQgMTEuNjg3NCAxLjc1IDEwLjgxMjRDMS4xIDkuOTM3NCAwLjY0NTgzMyA5LjEzMzI0IDAuMzg3NSA4LjM5OTlDMC4xMjkxNjcgNy42NjY1NyAwIDYuOTE2NTcgMCA2LjE0OTlDMCA0LjU4MzI0IDAuNTI1IDMuMjc0OSAxLjU3NSAyLjIyNDlDMi42MjUgMS4xNzQ5IDMuOTMzMzMgMC42NDk5MDIgNS41IDAuNjQ5OTAyQzYuMzY2NjcgMC42NDk5MDIgNy4xOTE2NyAwLjgzMzIzNiA3Ljk3NSAxLjE5OTlDOC43NTgzMyAxLjU2NjU3IDkuNDMzMzMgMi4wODMyNCAxMCAyLjc0OTlDMTAuNTY2NyAyLjA4MzI0IDExLjI0MTcgMS41NjY1NyAxMi4wMjUgMS4xOTk5QzEyLjgwODMgMC44MzMyMzYgMTMuNjMzMyAwLjY0OTkwMiAxNC41IDAuNjQ5OTAyQzE2LjA2NjcgMC42NDk5MDIgMTcuMzc1IDEuMTc0OSAxOC40MjUgMi4yMjQ5QzE5LjQ3NSAzLjI3NDkgMjAgNC41ODMyNCAyMCA2LjE0OTlDMjAgNi45MTY1NyAxOS44NzA4IDcuNjY2NTcgMTkuNjEyNSA4LjM5OTlDMTkuMzU0MiA5LjEzMzI0IDE4LjkgOS45Mzc0IDE4LjI1IDEwLjgxMjRDMTcuNiAxMS42ODc0IDE2LjcyNSAxMi42NzQ5IDE1LjYyNSAxMy43NzQ5QzE0LjUyNSAxNC44NzQ5IDEzLjEzMzMgMTYuMTgzMiAxMS40NSAxNy42OTk5TDEwIDE4Ljk5OTlaIiBmaWxsPSIjRjBGMEYwIi8+Cjwvc3ZnPgo=",
"navigation": {
"nextMoment": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJzY2FsZSgxIC0xKSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNjY2NjcgMThWNS43MzMzMkwxLjg2NjY3IDEwLjUzMzNMMCA4LjY2NjY2TDggMC42NjY2NTZMMTYgOC42NjY2NkwxNC4xMzMzIDEwLjUzMzNMOS4zMzMzMyA1LjczMzMyVjE4SDYuNjY2NjdaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjkyIi8+Cjwvc3ZnPgo=",
"prevMoment": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNjY2NjcgMThWNS43MzMzMkwxLjg2NjY3IDEwLjUzMzNMMCA4LjY2NjY2TDggMC42NjY2NTZMMTYgOC42NjY2NkwxNC4xMzMzIDEwLjUzMzNMOS4zMzMzMyA1LjczMzMyVjE4SDYuNjY2NjdaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjkyIi8+Cjwvc3ZnPgo="
}
},
"buttons": {
"mute_unmute": {
"mobile": {
"isVisible": true,
"width": "22px",
"height": "22px",
"color": "",
"padding": "10px",
"borderRadius": "",
"backgroundColor": ""
},
"tablet": {
"isVisible": true,
"width": "22px",
"height": "22px",
"color": "",
"padding": "10px",
"borderRadius": "",
"backgroundColor": ""
},
"desktop": {
"isVisible": true,
"width": "25px",
"height": "25px",
"color": "",
"padding": "10px",
"borderRadius": "",
"backgroundColor": ""
}
},
"exit": {
"mobile": {
"isVisible": true,
"width": "22px",
"height": "22px",
"color": "",
"padding": "10px",
"borderRadius": "",
"backgroundColor": ""
},
"tablet": {
"isVisible": true,
"width": "22px",
"height": "22px",
"color": "",
"padding": "10px",
"borderRadius": "",
"backgroundColor": ""
},
"desktop": {
"isVisible": false,
"width": "25px",
"height": "25px",
"color": "",
"padding": "10px",
"borderRadius": "",
"backgroundColor": ""
}
},
"share": {
"mobile": {
"isVisible": true,
"width": "20px",
"height": "20px",
"color": "",
"padding": "10px",
"borderRadius": "50%",
"backgroundColor": "#18181899"
},
"tablet": {
"isVisible": true,
"width": "20px",
"height": "20px",
"color": "",
"padding": "10px",
"borderRadius": "50%",
"backgroundColor": "#18181899"
},
"desktop": {
"isVisible": true,
"width": "25px",
"height": "25px",
"color": "",
"padding": "10px",
"borderRadius": "50%",
"backgroundColor": "#18181899"
}
},
"like_unlike": {
"mobile": {
"isVisible": true,
"width": "20px",
"height": "20px",
"color": "",
"padding": "10px",
"borderRadius": "50%",
"backgroundColor": "#18181899"
},
"tablet": {
"isVisible": true,
"width": "20px",
"height": "20px",
"color": "",
"padding": "10px",
"borderRadius": "50%",
"backgroundColor": "#18181899"
},
"desktop": {
"isVisible": true,
"width": "25px",
"height": "25px",
"color": "",
"padding": "10px",
"borderRadius": "50%",
"backgroundColor": "#18181899"
}
}
},
"iconsButtonOrder": [ "EXIT_PLAYER","MUTE_UNMUTE"],
"iconsPosition": "VERTICAL",
"captions": {
"font": "'Inter', sans-serif",
"fontWeight": "700",
"positioning": {
"horizontal": "start",
"vertical": "top"
}
}
}Player Content
Heading Text
| Attribute | Default Value | Property Name | Type |
|---|---|---|---|
| font family | WSC Open Sans | font | String |
| Text Size Mobile | 16px | textSizeMobile | String |
| Text Size Tablet | 17px | textSizeTablet | String |
| Text Size Desktop | 18px | textSizeDesktop | String |
| Text Color | # F0F0F0 | textColor | String |
| Font Weight | 600 | fontWeight | String |
| Text Transform | none | textTransform | String |
| Is Heading Text Visible | false | isVisible | Boolean |
| Line Height | 1.5 | lineHeight | String |
| Content Source | TITLE | contentSource | 'TITLE' | 'SUBTITLE' |
Body Text
| Attribute | Default Value | Property Name | Type |
|---|---|---|---|
| font family | WSC Open Sans | font | String |
| Text Size Mobile | 14px | textSizeMobile | String |
| Text Size Tablet | 15px | textSizeTablet | String |
| Text Size Desktop | 16px | textSizeDesktop | String |
| Text Color | # F0F0F0 | textColor | String |
| Font Weight | 400 | fontWeight | String |
| Text Transform | none | textTransform | String |
| Is Body Text Visible | true | isVisible | Boolean |
| Line Height | 1.5 | lineHeight | String |
| Content Source | TITLE | contentSource | 'TITLE' | 'SUBTITLE' | 'DESCRIPTION' |
Like Text
Represents the counter under the like button
| Attribute | Default Value | Property Name | Type |
|---|---|---|---|
| font family | WSC Open Sans | font | String |
| Text Size Mobile | 14px | textSizeMobile | String |
| Text Size Tablet | 15px | textSizeTablet | String |
| Text Size Desktop | 16px | textSizeDesktop | String |
| Text Color | # FFFFFF | textColor | String |
| Font Weight | 700 | fontWeight | String |
| Text Transform | none | textTransform | String |
| Is Like Text Visible | true | isVisible | Boolean |
| Line Height | 1 | lineHeight | String |
Captions
Use captions on MomentPlayerStyle to customize the appearance and placement of closed captions in the player.
| Attribute | Property Name | Type |
|---|---|---|
| Font | captions.font | string |
| Font size | captions.fontSize | string |
| Font weight | captions.fontWeight | string |
| Horizontal positioning | captions.positioning.horizontal | string |
| Vertical positioning | captions.positioning.vertical | string |
Supported values:
captions.positioning.horizontal:start|centercaptions.positioning.vertical:top|center|bottom
myRowCircleTheme.playerStyle.captions = {
font: "'WSC Open Sans'",
fontSize: '16px',
fontWeight: '700',
positioning: {
horizontal: 'center',
vertical: 'bottom'
}
}Player Icons
Player Icons List - Moments
All icons listed here use base64 encoding for their respective SVG data. The navigation icons are nested within the icons object and represent specific actions for navigating through pages and stories.
| Icon Name | Property Name |
|---|---|
| Play | icons.play |
| pause | icons.pause |
| mute | icons.mute |
| unmute | icons.unmute |
| share | icons.share |
| exit | icons.exitDesktop |
| nextMoment | icons.navigation.nextMoment |
| prevMoment | icons.navigation.prevMoment |
myRowCircleTheme.playerStyle.icons.mute = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBsYXlfYXJyb3dfIGhvbGxvdyI+CjxtYXNrIGlkPSJtYXNrMF8yMTA2Xzk5NCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgaWQ9IkJvdW5kaW5nIGJveCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yMTA2Xzk5NCkiPgo8cGF0aCBpZD0icGxheV9hcnJvdyIgZD0iTTggMTlWNUwxOSAxMkw4IDE5Wk0xMCAxNS4zNUwxNS4yNSAxMkwxMCA4LjY1VjE1LjM1WiIgZmlsbD0iI0YwRjBGMCIvPgo8L2c+CjwvZz4KPC9zdmc+Cg=='
myRowCircleTheme.playerStyle.icons.navigation.nextMoment = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBsYXlfYXJyb3dfIGhvbGxvdyI+CjxtYXNrIGlkPSJtYXNrMF8yMTA2Xzk5NCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij4KPHJlY3QgaWQ9IkJvdW5kaW5nIGJveCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yMTA2Xzk5NCkiPgo8cGF0aCBpZD0icGxheV9hcnJvdyIgZD0iTTggMTlWNUwxOSAxMkw4IDE5Wk0xMCAxNS4zNUwxNS4yNSAxMkwxMCA4LjY1VjE1LjM1WiIgZmlsbD0iI0YwRjBGMCIvPgo8L2c+CjwvZz4KPC9zdmc+Cg=='Customize Player Icons Style by Device - Mobile / Tablet / Desktop
| Button Type | Device Type | Visibilty | Width | Height | Color | Padding | Border Radius | Background Color |
|---|---|---|---|---|---|---|---|---|
| mute_unmute | Mobile | true | 22px | 22px | (empty) | 10px | (empty) | (empty) |
| Tablet | true | 22px | 22px | (empty) | 10px | (empty) | (empty) | |
| Desktop | true | 25px | 25px | (empty) | 10px | (empty) | (empty) | |
| exit | Mobile | true | 22px | 22px | (empty) | 10px | (empty) | (empty) |
| Tablet | true | 22px | 22px | (empty) | 10px | (empty) | (empty) | |
| Desktop | false | 25px | 25px | (empty) | 10px | (empty) | (empty) | |
| share | Mobile | true | 20px | 20px | (empty) | 10px | 50% | # 18181899 |
| Tablet | true | 20px | 20px | (empty) | 10px | 50% | # 18181899 | |
| Desktop | true | 25px | 25px | (empty) | 10px | 50% | # 18181899 | |
| like_unlike | Mobile | true | 20px | 20px | (empty) | 10px | 50% | # 18181899 |
| Tablet | true | 20px | 20px | (empty) | 10px | 50% | # 18181899 | |
| Desktop | true | 25px | 25px | (empty) | 10px | 50% | # 18181899 |
Player Icons Order - Moments
You can control the order of the player icons from left to right by rearranging them as desired.
myRowCircleTheme.playerStyle.topIconsButtonOrder = ["MUTE_UNMUTE","EXIT_PLAYER","CUSTOM_ACTION_BUTTON_ONE", "CUSTOM_ACTION_BUTTON_TWO"]
myRowCircleTheme.playerStyle.bottomIconsButtonOrder = ["SHARE","LIKE_UNLIKE","CLOSED_CAPTIONS","CUSTOM_ACTION_BUTTON_ONE", "CUSTOM_ACTION_BUTTON_TWO"]
Player Icon Position
We can set our player icon position to be Vertical or Horizontal
myRowCircleTheme.playerStyle.iconsPosition = 'VERTICAL' // HORIZONTAL is the default valuePlayer Seek Bar
The seek bar is a crucial part of the video player interface, allowing users to navigate through the video content. The configuration options allow you to customize the appearance and behavior of the seek bar to match your application's design and user experience requirements.
Customized - Playing State
Customized - Paused State
| Attribute | Default Value | Property Name | Type |
|---|---|---|---|
| Is Visible | true | isVisible | Boolean |
| Bottom Spacing | 20px | bottomSpacing | String |
| Horizontal Spacing | 15px | horizontalSpacing | String |
| Playing State Visible | true | playingState.isVisible | Boolean |
| Playing State Thumb Visible | false | playingState.isThumbVisible | Boolean |
| Playing State Background Color | Colors.Gray | playingState.backgroundColor | String |
| Playing State Progress Color | Colors.White | playingState.progressColor | String |
| Playing State Height | 3px | playingState.height | String |
| Playing State Corner Radius | 5px | playingState.cornerRadius | String |
| Playing State Thumb Color | '' | playingState.thumbColor | String |
| Playing State Thumb Size | 0px | playingState.thumbSize | String |
| Paused State Visible | true | pausedState.isVisible | Boolean |
| Paused State Thumb Visible | true | pausedState.isThumbVisible | Boolean |
| Paused State Background Color | Colors.Gray | pausedState.backgroundColor | String |
| Paused State Progress Color | Colors.White | pausedState.progressColor | String |
| Paused State Height | 5px | pausedState.height | String |
| Paused State Corner Radius | 5px | pausedState.cornerRadius | String |
| Paused State Thumb Color | Colors.White | pausedState.thumbColor | String |
| Paused State Thumb Size | 15px | pausedState.thumbSize | String |
Example Configuration - Default Value
seekBar: {
isVisible: true,
bottomSpacing: '20px',
horizontalSpacing: '15px',
playingState: {
isVisible: true,
isThumbVisible: false,
backgroundColor: Colors.Gray,
progressColor: Colors.White,
height: '3px',
cornerRadius: '5px',
thumbColor: '',
thumbSize: '0px'
},
pausedState: {
isVisible: true,
isThumbVisible: true,
backgroundColor: Colors.Gray,
progressColor: Colors.White,
height: '5px',
cornerRadius: '5px',
thumbColor: Colors.White,
thumbSize: '15px'
}
}// Customizing the seek-bar
myRowCircleTheme.playerStyle.seekBar.playingState.height = '8px';
myRowCircleTheme.playerStyle.seekBar.playingState.progressColor = 'gold';
myRowCircleTheme.playerStyle.seekBar.playingState.backgroundColor = 'white'
myRowCircleTheme.playerStyle.seekBar.playingState.isThumbVisible = true;
myRowCircleTheme.playerStyle.seekBar.playingState.thumbSize = '20px'
myRowCircleTheme.playerStyle.seekBar.playingState.thumbColor = 'orange'
myRowCircleTheme.playerStyle.seekBar.pausedState.height = '12px';
myRowCircleTheme.playerStyle.seekBar.pausedState.progressColor = 'red';
myRowCircleTheme.playerStyle.seekBar.pausedState.cornerRadius = '0px'
myRowCircleTheme.playerStyle.seekBar.pausedState.thumbSize = '15px';
myRowCircleTheme.playerStyle.seekBar.bottomSpacing = '20px'
myRowCircleTheme.playerStyle.seekBar.horizontalSpacing = '15px'CTA Button Configuration
The CTA button is a crucial part of the user interface, allowing users to perform key actions. The configuration options allow you to customize the appearance and behavior of the CTA button to match your application's design and user experience requirements.
CTA - Position Start with Icon
ctaButton - BlazeMomentsPlayerCTAStyle
Represents the CTA button configuration in the SDK.
| Attribute | Default Value | Property Name | Type |
|---|---|---|---|
| Button Visibility | true | isVisible | boolean |
| Corner Radius | 8px | cornerRadius | String |
| Text Size | 16px | textSize | String |
| Font | Presets.playerFont | font | String |
| Width | '' - Overrides the default value if not set to full width. | width | String |
| Height | 40px | height | String |
| Layout Positioning | CTA_BELLOW_BOTTOM_BUTTONS_BOX | layoutPositioning | BlazeMomentsPlayerCTAPositioning |
| Horizontal Alignment | FULL_AVAILABLE_WIDTH | horizontalAlignment | BlazeMomentsPlayerCTAHorizontalAlignment |
| Font Weight | 700 | fontWeight | String |
| Icon Position | START | icon.position | String |
| Icon Color | Colors.Black | icon.color | String |
| Icon URL | externalLinkIconSvg | icon.url | String |
| Icon Size | 24px | icon.size | String |
| Icon Visibility | false | icon.isVisible | Boolean |
BlazeMomentsPlayerCTAPositioning
Represents the layout positioning options for the CTA button.
| Attribute | Description |
|---|---|
CTA_BELLOW_BOTTOM_BUTTONS_BOX | Positions the CTA button at the bottom after the button box |
CTA_NEXT_TO_BOTTOM_BUTTONS_BOX | Positions the CTA button next to bottom buttons box |
BlazeMomentsPlayerCTAHorizontalAlignment
Represents the horizontal alignment options for the CTA button.
| Attribute | Description |
|---|---|
FULL_AVAILABLE_WIDTH | Aligns the CTA button to take the full available width. |
CENTER | Aligns the CTA button to the center horizontally. |
START | Aligns the CTA button to the start. |
END | Aligns the CTA button to the end. |
Example Configuration
ctaButton: {
isVisible: true,
cornerRadius: '8px',
textSize: '16px',
font: Presets.playerFont,
width: '',
height: '40px',
layoutPositioning: 'CTA_BELLOW_BOTTOM_BUTTONS_BOX',
horizontalAlignment: 'FULL_AVAILABLE_WIDTH',
fontWeight: '700',
icon: {
position: 'START',
color: Colors.Black,
url: externalLinkIconSvg,
size: '24px',
isVisible: false
}
}Custom Configuration Example
myRowCircleTheme.playerStyle.ctaButton.isVisible = true;
myRowCircleTheme.playerStyle.ctaButton.textSize = '20px';
myRowCircleTheme.playerStyle.ctaButton.font = 'Arial';
myRowCircleTheme.playerStyle.ctaButton.fontWeight = '100';
myRowCircleTheme.playerStyle.ctaButton.horizontalAlignment = 'START';
myRowCircleTheme.playerStyle.ctaButton.width = '50%';
myRowCircleTheme.playerStyle.ctaButton.layoutPositioning = 'CTA_BELLOW_BOTTOM_BUTTONS_BOX';
myRowCircleTheme.playerStyle.ctaButton.icon.isVisible = true;
myRowCircleTheme.playerStyle.ctaButton.icon.color = 'white';
myRowCircleTheme.playerStyle.ctaButton.icon.size = '24px';
myRowCircleTheme.playerStyle.ctaButton.cornerRadius = '10px';Follow Button
The follow button allows users to follow or unfollow entities (users, teams, etc.) directly from the player interface. The configuration options enable you to customize the appearance and behavior of the follow button to match your application's design requirements.
Follow Button Configuration
Represents the Follow button configuration in the SDK.
| Attribute | Default Value | Property Name | Type |
|---|---|---|---|
| Visibility | true | isVisible | boolean |
| Variant | text | variant | BlazeFollowButtonVariant |
| Follow Entity Type Priority | undefined | followEntityTypePriority | BlazeSelectableEntityType[] |
| Avatar Border Width | 3px | avatar.borderWidth | String |
| Avatar Followed Border Color | #FFFFFF | avatar.followedBorderColor | String |
| Avatar Unfollowed Border Color | #FFFFFF | avatar.unfollowedBorderColor | String |
| Chip Followed Background Color | #FFFFFF | chip.followedBackgroundColor | String |
| Chip Unfollowed Background Color | #FFFFFF | chip.unfollowedBackgroundColor | String |
| Chip Icon/Text Color | #000000 | chip.color | String |
BlazeFollowButtonVariant
Represents the visual style variants for the follow button.
| Value | Description |
|---|---|
text | Displays 'Follow' label inside chip in 'unfollowed' state. |
icon | Displays '+' icon inside chip in 'unfollowed' state. |
BlazeSelectableEntityType
Represents the types of entities that can be followed, in order of priority.
| Value | Description |
|---|---|
Player | Individual player |
Team | Team or club |
Property | Property or organization |
FirstAvailable | Automatically select the first available entity type |
Example Configuration
followButton: {
isVisible: true,
variant: 'text',
followEntityTypePriority: ['Player', 'Team', 'Property' ,'FirstAvailable'],
avatar: {
borderWidth: '3px',
followedBorderColor: '#FFFFFF',
unfollowedBorderColor: '#FFFFFF'
},
chip: {
followedBackgroundColor: '#FFFFFF',
unfollowedBackgroundColor: '#FFFFFF',
color: '#000000'
}
}Custom Configuration Example
myRowCircleTheme.playerStyle.followButton.isVisible = true;
myRowCircleTheme.playerStyle.followButton.variant = 'text';
myRowCircleTheme.playerStyle.followButton.followEntityTypePriority = ['Player', 'Team', 'Property' ,'FirstAvailable'];
myRowCircleTheme.playerStyle.followButton.chip.followedBackgroundColor = '#FFFFFF';
myRowCircleTheme.playerStyle.followButton.chip.unfollowedBackgroundColor = '#FFFFFF';
myRowCircleTheme.playerStyle.followButton.chip.color = '#000000';
myRowCircleTheme.playerStyle.followButton.avatar.borderWidth = '3px';
myRowCircleTheme.playerStyle.followButton.avatar.followedBorderColor = '#FFFFFF';
myRowCircleTheme.playerStyle.followButton.avatar.unfollowedBorderColor = '#FFFFFF';Updated 11 days ago
Did this page help you?