set up components and icons for optional creator's social pages; add airplay icon
This commit is contained in:
Ginger Wong
parent
b1e1d0168a
commit
19dee67f2a
BIN
webroot/img/airplay.png
Normal file
BIN
webroot/img/airplay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
webroot/img/social-icons.gif
Normal file
BIN
webroot/img/social-icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -13,6 +13,7 @@
|
||||
<script src="//unpkg.com/video.js@7.8.3/dist/video.js"></script>
|
||||
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
|
||||
<script src="vendor/autolink.js"></script>
|
||||
|
||||
<link href="./styles/layout.css" rel="stylesheet" />
|
||||
</head>
|
||||
<script>
|
||||
@ -74,7 +75,7 @@ GW TODO:
|
||||
autoplay
|
||||
playsinline
|
||||
muted
|
||||
poster="/thumbnail.jpg"
|
||||
poster="https://goth.land/thumbnail.jpg"
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
@ -89,29 +90,41 @@ GW TODO:
|
||||
</main>
|
||||
|
||||
<section id="user-content" class="user-content">
|
||||
<div class="social-list flex">
|
||||
<user-social-icon
|
||||
v-for="(item, index) in socialHandles"
|
||||
v-if="item.platform && item.handle"
|
||||
v-bind:key="index"
|
||||
v-bind:platform="item.platform"
|
||||
v-bind:username="item.handle"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- USER CONTENT... -->
|
||||
<div v-html="description"></div>
|
||||
|
||||
<footer class="flex border-t border-gray-500 border-solid">
|
||||
<span>
|
||||
<a href="https://github.com/gabek/owncast" target="_blank">About Owncast</a>
|
||||
</span>
|
||||
</footer>
|
||||
<owncast-footer />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<section id="chat-container-wrap" class="flex">
|
||||
<div id="user-content-touch" class="user-content">
|
||||
<div class="social-list flex">
|
||||
<user-social-icon
|
||||
v-for="(item, index) in socialHandles"
|
||||
v-if="item.platform && item.handle"
|
||||
v-bind:key="index"
|
||||
v-bind:platform="item.platform"
|
||||
v-bind:username="item.handle"
|
||||
/>
|
||||
</div>
|
||||
<!-- USER CONTENT... -->
|
||||
<div v-html="description"></div>
|
||||
|
||||
<!-- need a better way to duplicate footer, use VUE component-->
|
||||
<footer class="flex border-t border-gray-500 border-solid">
|
||||
<span>
|
||||
<a href="https://github.com/gabek/owncast" target="_blank">About Owncast</a>
|
||||
</span>
|
||||
</footer>
|
||||
<owncast-footer />
|
||||
|
||||
</div>
|
||||
|
||||
<div id="chat-container" class="bg-gray-800">
|
||||
@ -167,6 +180,7 @@ GW TODO:
|
||||
<script src="js/config.js"></script>
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/message.js"></script>
|
||||
<script src="js/footer.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/player/airplay.js"></script>
|
||||
<script src="js/player/player.js"></script>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// add more to the promises later.
|
||||
class Config {
|
||||
async init() {
|
||||
const configFileLocation = "./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. <br><br>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" }
|
||||
]
|
||||
}
|
||||
138
webroot/js/footer.js
Normal file
138
webroot/js/footer.js
Normal file
@ -0,0 +1,138 @@
|
||||
Vue.component('owncast-footer', {
|
||||
template: `
|
||||
<footer class="flex border-t border-gray-500 border-solid">
|
||||
<span>
|
||||
<a href="https://github.com/gabek/owncast" target="_blank">About Owncast</a>
|
||||
</span>
|
||||
</footer>
|
||||
`,
|
||||
});
|
||||
|
||||
|
||||
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: `
|
||||
<a
|
||||
v-bind:class="itemClass"
|
||||
target="_blank"
|
||||
:href="link"
|
||||
>
|
||||
<span
|
||||
class="platform-icon rounded-lg"
|
||||
:style="style"
|
||||
/>
|
||||
<span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
|
||||
</a>
|
||||
`,
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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");
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user