diff --git a/webroot/img/airplay.png b/webroot/img/airplay.png
new file mode 100644
index 000000000..f1c99750b
Binary files /dev/null and b/webroot/img/airplay.png differ
diff --git a/webroot/img/social-icons.gif b/webroot/img/social-icons.gif
new file mode 100644
index 000000000..cd9e8a8f5
Binary files /dev/null and b/webroot/img/social-icons.gif differ
diff --git a/webroot/index.html b/webroot/index.html
index 467c4f387..15ac3e6ec 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -13,6 +13,7 @@
+
+
diff --git a/webroot/js/app.js b/webroot/js/app.js
index d8775f208..11ca6dccf 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -1,7 +1,6 @@
async function setupApp() {
Vue.filter('plural', pluralize);
-
window.app = new Vue({
el: "#app-container",
data: {
@@ -13,6 +12,7 @@ async function setupApp() {
description: "",
title: "",
isOnline: false,
+ socialHandles: [],
},
watch: {
messages: {
@@ -34,11 +34,12 @@ async function setupApp() {
const config = await new Config().init();
app.title = config.title;
+ app.socialHandles = config.socialHandles;
- const configFileLocation = "./js/config.json";
+ // const configFileLocation = "../js/config.json";
try {
- const pageContentFile = "/static/content.md"
+ const pageContentFile = "../static/content.md"
const response = await fetch(pageContentFile);
const descriptionMarkdown = await response.text()
const descriptionHTML = new showdown.Converter().makeHtml(descriptionMarkdown);
@@ -55,9 +56,9 @@ function setupWebsocket() {
// Uncomment to point to somewhere other than goth.land
const protocol = location.protocol == "https:" ? "wss" : "ws"
- var ws = new WebSocket(protocol + "://" + location.host + "/entry")
+ // var ws = new WebSocket(protocol + "://" + location.host + "/entry")
- // var ws = new WebSocket("wss://goth.land/entry")
+ var ws = new WebSocket("wss://goth.land/entry")
ws.onmessage = (e) => {
const model = JSON.parse(e.data)
diff --git a/webroot/js/config.js b/webroot/js/config.js
index 72ea04958..a3538abeb 100644
--- a/webroot/js/config.js
+++ b/webroot/js/config.js
@@ -1,3 +1,4 @@
+// add more to the promises later.
class Config {
async init() {
const configFileLocation = "./js/config.json";
diff --git a/webroot/js/config.json b/webroot/js/config.json
index e42ba63db..fefa12656 100644
--- a/webroot/js/config.json
+++ b/webroot/js/config.json
@@ -1,10 +1,18 @@
{
"title": "Owncast Demo Server",
- "logo": "/img/logo.png",
+ "logo": "/img/logo128.png",
"description": "This is a demo server for Owncast. You can read more about it at owncast.online. You can edit this description in your web config file.
Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.",
"tags": [
"music",
"software",
"animal crossing"
+ ],
+ "socialHandles": [
+ { "platform": "twitter", "handle": "abc" },
+ { "platform": "instagram", "handle": "abc" },
+ { "platform": "facebook", "handle": "" },
+ { "platform": "tiktok", "handle": "abc" },
+ { "platform": "soundcloud", "handle": "abc" },
+ { "platform": "newone", "handle": "abc" }
]
}
\ No newline at end of file
diff --git a/webroot/js/footer.js b/webroot/js/footer.js
new file mode 100644
index 000000000..3198caca0
--- /dev/null
+++ b/webroot/js/footer.js
@@ -0,0 +1,138 @@
+Vue.component('owncast-footer', {
+ template: `
+
+ `,
+});
+
+
+const SOCIAL_PLATFORMS_URLS = {
+ default: {
+ name: "default",
+ urlPrefix: "",
+ imgPos: [0,0], // [row,col]
+ },
+
+ facebook: {
+ name: "Facebook",
+ urlPrefix: "http://www.facebook.com/",
+ imgPos: [0,1], // [row,col]
+ },
+ twitter: {
+ name: "Twitter",
+ urlPrefix: "http://www.twitter.com/",
+ imgPos: [0,2], // [row,col]
+ },
+ instagram: {
+ name: "Instagram",
+ urlPrefix: "http://www.instagram.com/",
+ imgPos: [0,3], // [row,col]
+ },
+ instagram: {
+ name: "Snapchat",
+ urlPrefix: "http://www.snapchat.com/",
+ imgPos: [0,4], // [row,col]
+ },
+ tiktok: {
+ name: "TikTok",
+ urlPrefix: "http://www.tiktok.com/",
+ imgPos: [0,5], // [row,col]
+ },
+ soundcloud: {
+ name: "Soundcloud",
+ urlPrefix: "http://www.soundcloud.com/",
+ imgPos: [0,6], // [row,col]
+ },
+ basecamp: {
+ name: "Base Camp",
+ urlPrefix: "http://www.basecamp.com/",
+ imgPos: [0,7], // [row,col]
+ },
+ patreon: {
+ name: "Patreon",
+ urlPrefix: "http://www.patreon.com/",
+ imgPos: [0,1], // [row,col]
+ },
+ youtube: {
+ name: "YouTube",
+ urlPrefix: "http://www.youtube.com/",
+ imgPos: [0,9 ], // [row,col]
+ },
+ spotify: {
+ name: "Spotify",
+ urlPrefix: "http://www.spotify.com/",
+ imgPos: [0,10], // [row,col]
+ },
+ twitch: {
+ name: "Twitch",
+ urlPrefix: "http://www.twitch.com/",
+ imgPos: [0,11], // [row,col]
+ },
+ paypal: {
+ name: "Paypal",
+ urlPrefix: "http://www.paypal.com/",
+ imgPos: [0,12], // [row,col]
+ },
+ github: {
+ name: "Github",
+ urlPrefix: "http://www.github.com/",
+ imgPos: [0,13], // [row,col]
+ },
+ linkedin: {
+ name: "LinkedIn",
+ urlPrefix: "http://www.linkedin.com/",
+ imgPos: [0,14], // [row,col]
+ },
+ discord: {
+ name: "Discord",
+ urlPrefix: "http://www.discord.com/",
+ imgPos: [0,15], // [row,col]
+ },
+ mastadon: {
+ name: "Mastadon",
+ urlPrefix: "http://www.mastadon.com/",
+ imgPos: [0,16], // [row,col]
+ },
+};
+
+Vue.component('user-social-icon', {
+ props: ['platform', 'username'],
+ data: function() {
+ const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"];
+ const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0;
+ const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0;
+ const useDefault = platformInfo.name === "default";
+ return {
+ name: platformInfo.name,
+ link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#',
+ style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
+ itemClass: {
+ "user-social-item": true,
+ "flex": true,
+ "rounded": useDefault,
+ "use-default": useDefault,
+ },
+ labelClass: {
+ "platform-label": true,
+ "visually-hidden": !useDefault,
+ "text-indigo-800": true,
+ },
+ };
+ },
+ template: `
+
+
+ Find @{{username}} on {{platform}}
+
+ `,
+});
diff --git a/webroot/js/message.js b/webroot/js/message.js
index b31064ccd..e8f5d7a96 100644
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@@ -13,7 +13,13 @@ class Message {
}
formatText() {
- var markdownToHTML = new showdown.Converter({ emoji: true, openLinksInNewWindow: true, tables: false, strikethrough: false, simplifiedAutoLink: false}).makeHtml(this.body);
+ var markdownToHTML = new showdown.Converter({
+ emoji: true,
+ openLinksInNewWindow: true,
+ tables: false,
+ strikethrough: false,
+ simplifiedAutoLink: false,
+ }).makeHtml(this.body);
var linked = autoLink(markdownToHTML, { embed: true });
return addNewlines(linked);
}
diff --git a/webroot/js/player/player.js b/webroot/js/player/player.js
index b38eb9725..6fbb5a781 100644
--- a/webroot/js/player/player.js
+++ b/webroot/js/player/player.js
@@ -1,5 +1,5 @@
-const streamURL = '/hls/stream.m3u8';
-// const streamURL = 'https://goth.land/hls/stream.m3u'; // Uncomment me to point to remote video
+// const streamURL = '/hls/stream.m3u8';
+const streamURL = 'https://goth.land/hls/stream.m3u8'; // Uncomment me to point to remote video
// style hackings
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 7e7f3763d..6b52b6a68 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -29,6 +29,17 @@ a:hover {
background: transparent;
}
+
+.visually-hidden {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ white-space: nowrap; /* added line */
+}
+
#app-container {
width: 100%;
flex-direction: column;
@@ -108,6 +119,52 @@ footer {
}
/* ************************************************8 */
+
+.user-content {
+ padding: 2em;
+}
+
+.social-list {
+ flex-direction: row;
+}
+.user-social-item:first-of-type::before {
+ content: 'FOLLOW ME: ';
+ font-weight: bold;
+ font-size: .75em;
+ margin-right: .5em;
+}
+
+.user-social-item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin-right: 0em;
+}
+.user-social-item .platform-icon {
+ --icon-width: 40px;
+ height: var(--icon-width);
+ width: var(--icon-width);
+ background-image: url(../img/social-icons.gif);
+ background-repeat: no-repeat;
+ background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width));
+ transform: scale(.65);
+}
+
+.user-social-item.use-default:hover {
+ text-decoration: none;
+ cursor: text;
+}
+
+.user-social-item.use-default .platform-label {
+ font-size: .7em;
+ text-transform: uppercase;
+ display: inline-block;
+ max-width: 10em;
+}
+
+
+/* ************************************************8 */
+
#user-options-container {
flex-direction: row;
justify-content: flex-end;
@@ -201,7 +258,8 @@ footer {
margin-top: -0.75em;
}
.vjs-airplay .vjs-icon-placeholder::before {
- content: 'AP';
+ /* content: 'AP'; */
+ content: url("../img/airplay.png");
}