Customizer class
Closed this issue · 5 comments
@jalmasi @eldinor this is not an actual issue but since we don't have a developer channel I'm creating this ticket just to inform you guys and will close once you acknowledge.
I created a 'Customizer' class (7258420) which will read event config in order to customize environments (including custom posters which Andrei worked on - fyi I deleted that branch since that code is now merged into main)
To see custom posters you can add the following to the .env.local
"posters":[{"name":"posterLeft_1280-666","width":3.84,"height":2,"posX":-5,"posY":4.45,"posZ":-5.5,"rotationY":-90,"url":"https://www.youredm.com/wp-content/uploads/2020/09/Launch-Promo-Landscape.jpg"},{"name":"posterLeft_1-1","width":2,"height":2,"posX":-5,"posY":4.45,"posZ":-2,"rotationY":-90,"url":"https://www.soundstage.fm/storage/photos/m682Pgdu3AIjWMAZA6UIjYWy7TKemMkr2D8lG4j4.png"},{"name":"posterLeft_3-4_1","width":1.8,"height":2.4,"posX":-5,"posY":4.45,"posZ":1.5,"rotationY":-90,"url":"https://www.soundstage.fm/storage/photos/NsLIxIB39n6jZHjjVyd70UxEEzwqRM9ErTWgwfDl.jpg"},{"name":"posterLeft_3-4_2","width":1.8,"height":2.4,"posX":-5,"posY":4.45,"posZ":4,"rotationY":-90,"url":"https://www.soundstage.fm/storage/photos/ZP5RxnLdO8YcxYNpeeCPYQ4BLRZ0CvnCKV4y2X3V.png"},{"name":"posterCenter_16-9","width":4.8,"height":2.7,"posX":2,"posY":4.45,"posZ":-8.57,"rotationY":180,"url":"https://www.soundstage.fm/storage/photos/ERJGCrb9uJWoqsLK3aFHKJWyu0a6bfBhgZCUqLTa.png"},{"name":"posterRight_3-1","width":6,"height":2,"posX":9.23,"posY":4.45,"posZ":0,"rotationY":90,"url":"https://pbs.twimg.com/profile_banners/1153539090777878528/1602776851/1500x500"},{"name":"posterCorner_3-4","width":3,"height":4,"posX":8.2,"posY":4.3,"posZ":-7.5,"rotationY":135,"url":"https://www.soundstage.fm/storage/photos/NsLIxIB39n6jZHjjVyd70UxEEzwqRM9ErTWgwfDl.jpg"}]
Works for me. However,
- .env.local is getting uglier and becoming unmanageable
- event config not subject to version control
I'd prefer to have something like
config/
josip.json
andrei.json
ara.json
2021-04-25-sundayparty.json
2021-04-29-thisandthatartist.json
...
.env.local:
VUE_APP_DEMO_CONFIG=josip.json
and the web app would just send json file name.
Not sure how to do it though due to packaging constraints, i.e. how our app can load a json file. Seems super simple: https://stackoverflow.com/questions/43735486/load-static-json-file-in-webpack
And now I just discovered I can't attach json file to github ticket :)
Well, here's the example, inline:
{
"event_slug":"josips-dev-space",
"alias":"Josip",
"role":"staff",
"permissions":{
"access_backstage":true,
"spawn_backstage":false,
"access_ramp":true,
"broadcast":true,
"moderator":true,
"stage_controls": true
},
"mediaSoup":{
"url":"wss:\/\/mediasoup.soundstage.fm"
},
"highFidelity":{
"url":"api-pro.highfidelity.com",
"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBfaWQiOiJmMzRlZmViZC00YWRjLTRlZTMtOWNkNS0yOGE3OTcwOThhZmQiLCJ1c2VyX2lkIjoiam9zaXAiLCJzcGFjZV9pZCI6ImQxYmM3Yjg0LTUwYmUtNDU0Zi04Yzc4LTczNmVhN2Q0NzYwYSIsInN0YWNrIjoiYXVkaW9uZXQtbWl4ZXItYXBpLXByby0wNSJ9.S2StFJf2VpOQyNnpqL79P5cngUDcN1UvdVWYT-cpYO4"
},
"posters":[
{
"name":"posterLeft_1280-666",
"width":3.84,
"height":2,
"posX":-5,
"posY":4.45,
"posZ":-5.5,
"rotationY":-90,
"url":"https://www.youredm.com/wp-content/uploads/2020/09/Launch-Promo-Landscape.jpg"
},
{
"name":"posterLeft_1-1",
"width":2,
"height":2,
"posX":-5,
"posY":4.45,
"posZ":-2,
"rotationY":-90,
"url":"https://www.soundstage.fm/storage/photos/m682Pgdu3AIjWMAZA6UIjYWy7TKemMkr2D8lG4j4.png"
},
{
"name":"posterLeft_3-4_1",
"width":1.8,
"height":2.4,
"posX":-5,
"posY":4.45,
"posZ":1.5,
"rotationY":-90,
"url":"https://www.soundstage.fm/storage/photos/NsLIxIB39n6jZHjjVyd70UxEEzwqRM9ErTWgwfDl.jpg"
},
{
"name":"posterLeft_3-4_2",
"width":1.8,
"height":2.4,
"posX":-5,
"posY":4.45,
"posZ":4,
"rotationY":-90,
"url":"https://www.soundstage.fm/storage/photos/ZP5RxnLdO8YcxYNpeeCPYQ4BLRZ0CvnCKV4y2X3V.png"
},
{
"name":"posterCenter_16-9",
"width":4.8,
"height":2.7,
"posX":2,
"posY":4.45,
"posZ":-8.57,
"rotationY":180,
"url":"https://www.soundstage.fm/storage/photos/ERJGCrb9uJWoqsLK3aFHKJWyu0a6bfBhgZCUqLTa.png"
},
{
"name":"posterRight_3-1",
"width":6,
"height":2,
"posX":9.23,
"posY":4.45,
"posZ":0,
"rotationY":90,
"url":"https://pbs.twimg.com/profile_banners/1153539090777878528/1602776851/1500x500"
},
{
"name":"posterCorner_3-4",
"width":3,
"height":4,
"posX":8.2,
"posY":4.3,
"posZ":-7.5,
"rotationY":135,
"url":"https://www.soundstage.fm/storage/photos/NsLIxIB39n6jZHjjVyd70UxEEzwqRM9ErTWgwfDl.jpg"
}
]
}
event config not subject to version control
I wouldn't place too much concern on that right now, I think it will be a while before i turns into a serious pain point worth addressing.
config/ josip.json andrei.json ara.json 2021-04-25-sundayparty.json 2021-04-29-thisandthatartist.json
for real events the configs are retreived via web service, see the ajax at https://github.com/SoundStageFM/soundstage-vr/blob/ce92d3168b3369d9089b125c5343fa4ecce3c115/src/ui/App.vue#L306
the only issue is local dev for you/me/andrei. personally i'm not too fond of including json files with tokens and such in our builds, it's not really a best practice.
it's not hard to beautify/stingify these things, just use this when you need to work with it https://codebeautify.org/jsonviewer
Well then skip tokens, include posters only, and other space properties to come.
Good point, I'll handle it shortly :)
@jalmasi @eldinor config system has been updated c07aee1
in the new system we have a config folder with a base.config.js, and your own custom config for local dev (e.g. ara.config.js) which you are free to modify and commit
after pulling look at .env.sample in order to update your .env.local, as you can see it's pretty self-explanatory:
VUE_APP_API_URL=https://dev.www.soundstage.fm
VUE_APP_SERVER_URL=wss://vr.soundstage.fm/vrspace
VUE_APP_DEMO_CONFIG=ara.config.js
VUE_APP_HIGH_FIDELITY_TOKEN=xxxxxxxxxxxxxxxxxx
VUE_APP_SKIP_WELCOME=false