{"id":51565,"date":"2021-01-10T16:01:44","date_gmt":"2021-01-10T15:01:44","guid":{"rendered":"https:\/\/www.instainblocks.com\/?page_id=51565"},"modified":"2026-07-03T01:43:12","modified_gmt":"2026-07-02T23:43:12","slug":"livestreams","status":"publish","type":"page","link":"https:\/\/musiveo.com\/livestreams\/","title":{"rendered":"Livestreams"},"content":{"rendered":"\n<div class=\"wp-block-columns tw-gutter-no is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column ticss-c45534c1 is-layout-flow wp-block-column-is-layout-flow\" style=\"--col-width:100%;flex-basis:100%\">        <div class=\"musiveo-ls-container musiveo-ls-theme-dark\"\r\n             id=\"mls_u0LdyAyv\"\r\n             data-config=\"{&quot;uuid&quot;:&quot;mls_u0LdyAyv&quot;,&quot;layout&quot;:&quot;grid&quot;,&quot;platform&quot;:&quot;all&quot;,&quot;users&quot;:&quot;all&quot;,&quot;userIds&quot;:[],&quot;userRole&quot;:&quot;&quot;,&quot;limit&quot;:12,&quot;columns&quot;:4,&quot;gap&quot;:20,&quot;showChat&quot;:false,&quot;chatPosition&quot;:&quot;side&quot;,&quot;theme&quot;:&quot;dark&quot;,&quot;showGame&quot;:true,&quot;showViewers&quot;:true,&quot;hoverEffect&quot;:&quot;glow&quot;,&quot;refresh&quot;:300,&quot;maxWidth&quot;:&quot;1280&quot;}\"\r\n             data-streams=\"[]\"\r\n             data-appearance=\"{&quot;tile_bg_colour&quot;:&quot;#0f0000&quot;,&quot;tile_rounded_corners&quot;:12,&quot;tile_title_colour&quot;:&quot;#ffffff&quot;,&quot;tile_subtitle_colour&quot;:&quot;#b0b0b0&quot;,&quot;hover_colour&quot;:&quot;rgba(148, 0, 211, 0.3)&quot;,&quot;badge_bg_colour&quot;:&quot;#e74c3c&quot;,&quot;badge_text_colour&quot;:&quot;#ffffff&quot;}\"\r\n             data-rest-url=\"https:\/\/musiveo.com\/json\/musiveo-livestreams\/v1\/users\/live\"\r\n             data-nonce=\"ad35fc0c08\"\r\n             data-wp-interactive=\"musiveo-livestreams\"\r\n             data-wp-context='{ \"activeStream\": null, \"chatCollapsed\": false }'\r\n             style=\"max-width:1280px;\">\r\n            <div class=\"musiveo-ls-loader\">\r\n                <div class=\"musiveo-ls-spinner\"><\/div>\r\n            <\/div>\r\n            <div class=\"musiveo-ls-player\">\r\n                <div class=\"musiveo-ls-player__placeholder\">\r\n                    <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"currentColor\" opacity=\"0.3\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\r\n                    <p>Select a stream to watch<\/p>\r\n                <\/div>\r\n                <div class=\"musiveo-ls-player__body\" style=\"display:none;\">\r\n                    <div class=\"musiveo-ls-player__video\"><\/div>\r\n                    <div class=\"musiveo-ls-player__chat\"><\/div>\r\n                <\/div>\r\n                <div class=\"musiveo-ls-player__info\" style=\"display:none;\">\r\n                    <span class=\"musiveo-ls-player__name\"><\/span>\r\n                    <span class=\"musiveo-ls-player__game\"><\/span>\r\n                    <span class=\"musiveo-ls-player__viewers\"><\/span>\r\n                    <button class=\"musiveo-ls-player__chat-toggle\" title=\"Toggle chat\" data-wp-on--click=\"actions.toggleChat\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path><\/svg>\r\n                    <\/button>\r\n                    <button class=\"musiveo-ls-player__close\" title=\"Close player\" data-wp-on--click=\"actions.closePlayer\">&times;<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"musiveo-ls-grid\" style=\"--mls-columns:4;--mls-gap:20px;\"><\/div>\r\n        <\/div>\r\n        \n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" style=\"font-size:26px;font-style:normal;font-weight:800\">Live (Following)<\/h2>\n\n\n<p class=\"musiveo-ls-following__login\" style=\"text-align:center;color:#b0b0b0;\">Please log in to see your followed streams.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:26px;font-style:normal;font-weight:800\">Live (Other)<\/h2>\n\n\n        <div class=\"musiveo-ls-live-users musiveo-ls-theme-dark musiveo-ls-layout-default\"\r\n             id=\"mlu_fJ4ymeEm\"\r\n             data-config=\"{&quot;uuid&quot;:&quot;mlu_fJ4ymeEm&quot;,&quot;layout&quot;:&quot;default&quot;,&quot;platform&quot;:&quot;all&quot;,&quot;showAvatar&quot;:true,&quot;showGame&quot;:true,&quot;showViewers&quot;:true,&quot;theme&quot;:&quot;dark&quot;,&quot;maxWidth&quot;:&quot;1280&quot;,&quot;refresh&quot;:300,&quot;livestreamsPage&quot;:&quot;https:\\\/\\\/musiveo.com\\\/livestreams&quot;}\"\r\n             data-users=\"[]\"\r\n             data-rest-url=\"https:\/\/musiveo.com\/json\/musiveo-livestreams\/v1\/users\/live\"\r\n             data-follow-url=\"https:\/\/musiveo.com\/wp-admin\/admin-ajax.php\"\r\n             data-follow-nonce=\"ad35fc0c08\"\r\n             data-follow-viewer=\"0\"\r\n             data-nonce=\"ad35fc0c08\"\r\n             data-wp-interactive=\"musiveo-livestreams\"\r\n             data-wp-context='{ \"showingAll\": false }'\r\n             style=\"max-width:1280px;\">\r\n            <div class=\"musiveo-ls-loader\">\r\n                <div class=\"musiveo-ls-spinner\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:26px;font-style:normal;font-weight:800\">VOD&#8217;s<\/h2>\n\n\n        <div class=\"musiveo-ls-vods musiveo-ls-theme-dark\"\r\n             id=\"mlv_fKZR90zX\"\r\n             data-rest-url=\"https:\/\/musiveo.com\/json\/musiveo-livestreams\/v1\/vods\"\r\n             data-nonce=\"ad35fc0c08\"\r\n             data-type=\"highlights\"\r\n             data-limit=\"8\"\r\n             data-platform=\"all\"\r\n             data-sort=\"newest\"\r\n             data-columns=\"4\"\r\n             style=\"max-width:1280px;\">\r\n            <div class=\"mls-vod-filters\">\r\n                <select class=\"mls-vod-filter-platform\">\r\n                    <option value=\"all\">All Platforms<\/option>\r\n                    <option value=\"twitch\">Twitch<\/option>\r\n                    <option value=\"youtube\">YouTube<\/option>\r\n                <\/select>\r\n                <select class=\"mls-vod-filter-channel\">\r\n                    <option value=\"all\">All Channels<\/option>\r\n                <\/select>\r\n                <select class=\"mls-vod-filter-sort\">\r\n                    <option value=\"newest\">Newest first<\/option>\r\n                    <option value=\"oldest\">Oldest first<\/option>\r\n                    <option value=\"popular\">Most popular<\/option>\r\n                <\/select>\r\n            <\/div>\r\n            <div class=\"musiveo-ls-vod-spinner\" style=\"text-align:center;padding:60px 0;\">\r\n                <div class=\"musiveo-ls-spinner\"><\/div>\r\n            <\/div>\r\n            <div class=\"musiveo-ls-vod-grid\" style=\"--mls-vod-columns:4;\"><\/div>\r\n            <script>\r\n            (function() {\r\n                function initVodFilters() {\r\n                    var container = document.getElementById('mlv_fKZR90zX');\r\n                    if (!container || container.hasAttribute('data-vod-filters')) return;\r\n                    container.setAttribute('data-vod-filters', '1');\r\n                    var pf = container.querySelector('.mls-vod-filter-platform');\r\n                    var ch = container.querySelector('.mls-vod-filter-channel');\r\n                    var srt = container.querySelector('.mls-vod-filter-sort');\r\n                    var grid = container.querySelector('.musiveo-ls-vod-grid');\r\n                    var spinner = container.querySelector('.musiveo-ls-vod-spinner');\r\n                    if (!pf || !grid) return;\r\n                    var abort = null;\r\n                    var initialLoad = true;\r\n\r\n                    \/\/ Set platform + sort selects to match shortcode attributes\r\n                    var initialPlatform = container.dataset.platform || 'all';\r\n                    pf.value = initialPlatform;\r\n                    var initialSort = container.dataset.sort || 'newest';\r\n                    if (srt) srt.value = initialSort;\r\n\r\n                    function updateChannelDropdown(videos) {\r\n                        var channels = [];\r\n                        videos.forEach(function(v) {\r\n                            if (v.channel && channels.indexOf(v.channel) === -1) channels.push(v.channel);\r\n                        });\r\n                        channels.sort();\r\n                        var currentVal = ch ? ch.value : 'all';\r\n                        ch.innerHTML = '<option value=\"all\">All Channels<\/option>';\r\n                        channels.forEach(function(c) {\r\n                            var opt = document.createElement('option');\r\n                            opt.value = c;\r\n                            opt.textContent = c;\r\n                            ch.appendChild(opt);\r\n                        });\r\n                        ch.value = currentVal;\r\n                    }\r\n\r\n                    function vodEscape(value) {\r\n                        return String(value == null ? '' : value).replace(\/[&<>\"']\/g, function(c) {\r\n                            return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c];\r\n                        });\r\n                    }\r\n\r\n                    function renderTiles(videos) {\r\n                        var html = '';\r\n                        videos.forEach(function(v) {\r\n                            var thumb = '';\r\n                            var platform = v.platform === 'twitch' || v.platform === 'youtube' ? v.platform : '';\r\n                            if (v.thumbnail && \/^https?:\\\/\\\/\/.test(v.thumbnail)) {\r\n                                thumb = '<img decoding=\"async\" src=\"' + vodEscape(v.thumbnail) + '\" loading=\"lazy\" alt=\"' + vodEscape(v.title) + '\" onerror=\"this.style.display=\\'none\\';this.nextElementSibling.style.display=\\'flex\\';\" \/>';\r\n                                thumb += '<div class=\"musiveo-ls-vod-tile__placeholder musiveo-ls-vod-tile__placeholder--fallback\" style=\"display:none;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"white\" opacity=\"0.5\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div>';\r\n                            } else {\r\n                                var icon = '<svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"white\" opacity=\"0.5\"><path d=\"M8 5v14l11-7z\"\/><\/svg>';\r\n                                if (v.platform === 'twitch') icon = '<svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"#9146FF\" opacity=\"0.6\"><path d=\"M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z\"\/><\/svg>';\r\n                                else if (v.platform === 'youtube') icon = '<svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"#FF0000\" opacity=\"0.6\"><path d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\/><\/svg>';\r\n                                thumb = '<div class=\"musiveo-ls-vod-tile__placeholder musiveo-ls-vod-tile__placeholder--' + platform + '\">' + icon + '<\/div>';\r\n                            }\r\n                            var duration = v.duration ? '<span class=\"musiveo-ls-vod-tile__duration\">' + vodEscape(v.duration) + '<\/span>' : '';\r\n                            var views = v.views > 0 ? '<span class=\"musiveo-ls-vod-tile__views\">' + new Intl.NumberFormat().format(v.views) + ' views<\/span>' : '';\r\n                            var date = v.date ? '<span class=\"musiveo-ls-vod-tile__date\">' + vodEscape(v.date) + '<\/span>' : '';\r\n                            html += '<div class=\"musiveo-ls-vod-tile\" data-platform=\"' + platform + '\" data-url=\"' + vodEscape(v.url) + '\" data-video-id=\"' + vodEscape(v.id) + '\" data-title=\"' + vodEscape(v.title) + '\" data-channel=\"' + vodEscape(v.channel) + '\">'\r\n                                + '<div class=\"musiveo-ls-vod-tile__thumb\">' + thumb\r\n                                + '<div class=\"musiveo-ls-vod-tile__overlay\"><span class=\"musiveo-ls-vod-tile__play-btn\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span><\/div>'\r\n                                + duration\r\n                                + '<span class=\"musiveo-ls-vod-tile__platform musiveo-ls-platform--' + platform + '\"><\/span>'\r\n                                + '<\/div>'\r\n                                + '<div class=\"musiveo-ls-vod-tile__info\"><span class=\"musiveo-ls-vod-tile__title\">' + vodEscape(v.title) + '<\/span>'\r\n                                + '<span class=\"musiveo-ls-vod-tile__meta\"><span class=\"musiveo-ls-vod-tile__channel\">' + vodEscape(v.channel) + '<\/span>' + date + views + '<\/span>'\r\n                                + '<\/div><\/div>';\r\n                        });\r\n                        if (!html) html = '<p class=\"musiveo-ls-no-vods\" style=\"text-align:center;color:#b0b0b0;\">No VODs found.<\/p>';\r\n                        grid.innerHTML = html;\r\n                    }\r\n\r\n                    function fetchVods() {\r\n                        if (abort) abort.abort();\r\n                        abort = new AbortController();\r\n                        var params = new URLSearchParams({\r\n                            platform: pf.value,\r\n                            channel: 'all',\r\n                            type: container.dataset.type || 'highlights',\r\n                            limit: container.dataset.limit || 8,\r\n                            sort: (srt && srt.value) || container.dataset.sort || 'newest'\r\n                        });\r\n                        if (!initialLoad) {\r\n                            grid.style.opacity = '0.4';\r\n                            grid.style.pointerEvents = 'none';\r\n                        }\r\n                        fetch(container.dataset.restUrl + '?' + params.toString(), {\r\n                            headers: { 'X-WP-Nonce': container.dataset.nonce },\r\n                            signal: abort.signal\r\n                        })\r\n                        .then(function(r) { return r.json(); })\r\n                        .then(function(json) {\r\n                            var videos = json.data || [];\r\n                            if (initialLoad) {\r\n                                if (spinner) spinner.style.display = 'none';\r\n                                initialLoad = false;\r\n                            }\r\n                            updateChannelDropdown(videos);\r\n                            var channelVal = ch ? ch.value : 'all';\r\n                            var filtered = videos;\r\n                            if (channelVal !== 'all') {\r\n                                filtered = videos.filter(function(v) { return v.channel === channelVal; });\r\n                            }\r\n                            renderTiles(filtered);\r\n                            grid.style.opacity = '1';\r\n                            grid.style.pointerEvents = '';\r\n                        })\r\n                        .catch(function(e) {\r\n                            if (e.name !== 'AbortError') {\r\n                                if (initialLoad) { if (spinner) spinner.style.display = 'none'; initialLoad = false; }\r\n                                grid.style.opacity = '1';\r\n                                grid.style.pointerEvents = '';\r\n                            }\r\n                        });\r\n                    }\r\n                    pf.addEventListener('change', function() {\r\n                        if (ch) ch.value = 'all';\r\n                        fetchVods();\r\n                    });\r\n                    if (ch) ch.addEventListener('change', fetchVods);\r\n                    if (srt) srt.addEventListener('change', fetchVods);\r\n                    \/\/ Initial fetch\r\n                    fetchVods();\r\n                }\r\n                if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initVodFilters); } else { initVodFilters(); }\r\n                document.addEventListener('pjax:complete', initVodFilters);\r\n            })();\r\n            <\/script>\r\n        <\/div>\r\n        \n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background tw-mt-10 is-style-default\" style=\"width: 100px; max-width: 100%;height: 1px;background-color:#333333;color:#333333\"\/>\n\n\n<div class=\"musiveo-ls-add-stream\"><p class=\"musiveo-ls-add-stream__login\">Please log in to add your stream.<\/p><\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Signup to Musiveo to add your YouTube &amp; Twitch livestreams to this page!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Live (Following) Live (Other) VOD&#8217;s Signup to Musiveo to add your YouTube &amp; Twitch livestreams to this page!<\/p>\n","protected":false},"author":496,"featured_media":0,"parent":0,"menu_order":43,"comment_status":"closed","ping_status":"closed","template":"","meta":{"type":"","auto_type":[],"post":[],"cover":[],"stream":[],"stream_url":[],"waveform_data":[],"duration":[],"start":[],"end":[],"bpm":[],"downloadable":[],"download_url":[],"purchase_title":[],"purchase_url":[],"post-count-all":[],"like_count":[],"download_count":[],"editor_note":[],"copyright":[],"ai_generated":[],"captions":[],"sources":[],"color":[],"hide_sidenav":false,"hide_pagenav":false,"hide_title":true,"hide_footer":false,"disable_player":false,"sidebar":0,"footer":0,"add_classes":"","cybocfi_hide_featured_image":"","no_ajax":false,"footnotes":"","hide_mobile_menu":false},"class_list":["post-51565","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/musiveo.com\/json\/wp\/v2\/pages\/51565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/musiveo.com\/json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/musiveo.com\/json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/musiveo.com\/json\/wp\/v2\/users\/496"}],"replies":[{"embeddable":true,"href":"https:\/\/musiveo.com\/json\/wp\/v2\/comments?post=51565"}],"version-history":[{"count":0,"href":"https:\/\/musiveo.com\/json\/wp\/v2\/pages\/51565\/revisions"}],"wp:attachment":[{"href":"https:\/\/musiveo.com\/json\/wp\/v2\/media?parent=51565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}