From 19dee67f2a2455d81a923a703c901bb43b03148d Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Sat, 20 Jun 2020 23:41:13 -0700 Subject: [PATCH] set up components and icons for optional creator's social pages; add airplay icon --- webroot/img/airplay.png | Bin 0 -> 1083 bytes webroot/img/social-icons.gif | Bin 0 -> 14841 bytes webroot/index.html | 38 +++++++--- webroot/js/app.js | 11 +-- webroot/js/config.js | 1 + webroot/js/config.json | 10 ++- webroot/js/footer.js | 138 +++++++++++++++++++++++++++++++++++ webroot/js/message.js | 8 +- webroot/js/player/player.js | 4 +- webroot/styles/layout.css | 60 ++++++++++++++- 10 files changed, 248 insertions(+), 22 deletions(-) create mode 100644 webroot/img/airplay.png create mode 100644 webroot/img/social-icons.gif create mode 100644 webroot/js/footer.js diff --git a/webroot/img/airplay.png b/webroot/img/airplay.png new file mode 100644 index 0000000000000000000000000000000000000000..f1c99750bdb5a6e99b1582a950c3c459b0295f2e GIT binary patch literal 1083 zcmaJ=TSyd97@o*1DusFoldVpZ4++iAWp~Hf$<6krF0^9nl134pnK`sC#A@wl6n*$imuN=J@pjWnQd2nh=!Rt=lp!%|9}7GT<-4bsN34O zm7=J+RA(YX)`R5RyQP-=&wM=nku1A$vJdxI1GoSkL`5}AK_F$oL6kvIE1g|LtrWGf zNzeA-zVtC!wG2P>F#e)p6E;P)wiRut4j~K_G^m>q`p4{Z8t7Vt?hU26v>it|y>rAt zJtJLNb!12lYjoQY&{~v<0|Q|QipH?%%Ebs>_A8UUXJ%LGz#)zNLNTPE;4LdDAC2u+m!O~J6!=~c(3 zTPYMN8C!%l%lkRjFuc6VXcuSDnv8#<-E7H5YzDbj-cdy*{c@jLR zwIB#JjzOHjGYAD0Cafrs5dxg3AVF&pC6%s_wRMS?$zm8vAqXWV#48#DB|?^XPGAC} zib6<(K`AKGERn-{tzFmZs)@{xw_P1va#$UGWRiJz$Y3A3bm}v?6f>zrG+TVH{9ajU zd)Z%mZ2N?7O178A?$rA(*Pq|Mu(G&tE%kJ2dTPA!?%4D@YX8X}xkg|9%Y%&_dnQj# zbw3?jjNN}WdUS5X79ogn!g8kJiIae>BdFnO2^w5$2VW~ e^i0%HH4Rj=(ERoK&hgvcbxtL_5|3m3<9`5bFJ!&| literal 0 HcmV?d00001 diff --git a/webroot/img/social-icons.gif b/webroot/img/social-icons.gif new file mode 100644 index 0000000000000000000000000000000000000000..cd9e8a8f54dc67899052f53349b0ee422ac549f1 GIT binary patch literal 14841 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 + + 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"); }