eessppeelllloo/hydra
1
0
Fork 0
mirror of https://github.com/hydra-synth/hydra.git synced 2025-12-21 14:20:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

added language toolbar

Browse Source
This commit is contained in:
ojack
2022-03-05 21:21:49 -05:00
parent 818199fc3d
commit db24126b34
5 changed files with 123 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/web-editor/public/bundle.js
View File

@@ -47115,7 +47115,7 @@ module.exports = PatchBay
module.exports = { module.exports = {
en: { en: {
translation: { translation: {
'language-name': 'English', 'language-name': 'english',
toolbar: { toolbar: {
run: "Run all code (ctrl+shift+enter)", run: "Run all code (ctrl+shift+enter)",
upload: "upload to gallery", upload: "upload to gallery",
@@ -47151,44 +47151,44 @@ module.exports = {
} }
} }
}, },
es: { // es: {
translation: { // translation: {
'language-name': 'asfafd', // 'language-name': 'asfafd',
toolbar: { // toolbar: {
run: "Run all code (ctrl+shift+enter)", // run: "Run all code (ctrl+shift+enter)",
upload: "upload to gallery", // upload: "upload to gallery",
clear: "clear all", // clear: "clear all",
shuffle: "show random sketch", // shuffle: "show random sketch",
random: "make random change", // random: "make random change",
"show-info": "show info window", // "show-info": "show info window",
"hide-info": "hide info window" // "hide-info": "hide info window"
}, // },
info: { // info: {
title: 'sdadddsad', // title: 'sdadddsad',
subtitle: 'live coding networked visuals', // subtitle: 'live coding networked visuals',
description: 'Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.', // description: 'Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.',
'get-started-title': 'To get started:', // 'get-started-title': 'To get started:',
'get-started-list': [ // 'get-started-list': [
'Close this window', // 'Close this window',
'Change some numbers', // 'Change some numbers',
'Type Ctrl + Shift + Enter' // 'Type Ctrl + Shift + Enter'
], // ],
'description-detailed': 'Built using WebRTC (peer-to-peer web streaming) and WebGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions.', // 'description-detailed': 'Built using WebRTC (peer-to-peer web streaming) and WebGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions.',
'features': 'Features:', // 'features': 'Features:',
'features-list': [ // 'features-list': [
'Written in javascript and compatible with other javascript libraries', // 'Written in javascript and compatible with other javascript libraries',
'Available as a platform as well as a set of standalone modules', // 'Available as a platform as well as a set of standalone modules',
'Cross-platform and requires no installation (runs in the browser)', // 'Cross-platform and requires no installation (runs in the browser)',
'Also available as a package for live coding from within atom text editor', // 'Also available as a package for live coding from within atom text editor',
'Experimental and forever evolving !!' // 'Experimental and forever evolving !!'
], // ],
'author': 'Created by <a {{author}}>olivia.</a>', // 'author': 'Created by <a {{author}}>olivia.</a>',
'more-info': 'For more information and instructions, see: <a {{docs}}>the online documentation</a>, <a {{functions}}>a list of hydra functions</a>, <a {{repo}}>the source code on github</a>, <a {{gallery}}>a gallery of user-generated sketches</a>, <a {{pixeljam}}>PIXELJAM collaborative editor</a>, <a {{hydra-book}}>Hydra Book</a>, and more <a {{tutorials}}>tutorials and examples.</a>', // 'more-info': 'For more information and instructions, see: <a {{docs}}>the online documentation</a>, <a {{functions}}>a list of hydra functions</a>, <a {{repo}}>the source code on github</a>, <a {{gallery}}>a gallery of user-generated sketches</a>, <a {{pixeljam}}>PIXELJAM collaborative editor</a>, <a {{hydra-book}}>Hydra Book</a>, and more <a {{tutorials}}>tutorials and examples.</a>',
'more-info-forums': 'There is also an active <a {{discord}}>Discord server</a> and <a {{facebook}}>facebook group</a> for hydra users+contributors.', // 'more-info-forums': 'There is also an active <a {{discord}}>Discord server</a> and <a {{facebook}}>facebook group</a> for hydra users+contributors.',
'support': 'If you enjoy using Hydra, please consider <a {{open-collective}} >supporting continued development <3 </a>.' // 'support': 'If you enjoy using Hydra, please consider <a {{open-collective}} >supporting continued development <3 </a>.'
} // }
} // }
} // }
} }
},{}],248:[function(require,module,exports){ },{}],248:[function(require,module,exports){
const Gallery = require('./gallery.js') const Gallery = require('./gallery.js')
@@ -47217,6 +47217,15 @@ module.exports = function store(state, emitter) {
selectedLanguage: i18next.language selectedLanguage: i18next.language
} }
emitter.on('set language', (lang) => {
console.log('setting language to', lang)
i18next.changeLanguage(lang, (err, t) => {
console.log(err, t)
selectedLanguage = lang
emitter.emit('render')
})
})
let sketches let sketches
emitter.on('DOMContentLoaded', function () { emitter.on('DOMContentLoaded', function () {
@@ -47994,12 +48003,15 @@ const toolbar = require('./toolbar.js')
const link = (url) => `href=${url} target=_blank` const link = (url) => `href=${url} target=_blank`
module.exports = function mainView(state, emit) { module.exports = function mainView(state, emit) {
const { t } = state.translation const { t, languages } = state.translation
const langArray = Object.entries(languages)
return html` return html`
<div id="info-container" class="${state.showInfo ? "" : "hidden"}"> <div id="info-container" class="${state.showInfo ? "" : "hidden"}">
<div id="modal"> <div id="modal">
<div id="modal-header" style="opacity:${state.showUI === true? 1: 0}"> <div id="modal-header" style="opacity:${state.showUI === true? 1: 0}">
<div><!--<i class="fas fa-bars icon"></i>--></div> ${state.showInfo && langArray.length > 1 ? html`<div style="display:flex">${langArray.map(([key, val]) => html`
<div class="language-select" onclick=${() => emit('set language', key)}>${val}</div>
`)}</div>` : html`<div></div>` }
${toolbar(state, emit)} ${toolbar(state, emit)}
</div> </div>
<div id="modal-body"> <div id="modal-body">

19
frontend/web-editor/public/css/modal.css
View File

@@ -21,6 +21,7 @@
-moz-transition: height 1s; -moz-transition: height 1s;
-o-transition: height 1s; -o-transition: height 1s;
transition: height 1s; transition: height 1s;
font-family: 'Chivo', sans-serif;
} }
#info-container.hidden { #info-container.hidden {
@@ -81,7 +82,6 @@ transition: width 1s;
height: 40px; height: 40px;
border: 1px solid white; border: 1px solid white;
margin: 0px; margin: 0px;
font-size: 20px;
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
@@ -91,19 +91,34 @@ transition: width 1s;
} }
.icon { .icon {
margin: 10px; margin: 10px;
margin-right: 15px; margin-right: 15px;
margin-left: 15px; margin-left: 15px;
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
font-size: 20px;
} }
.icon:hover{ .icon:hover{
color: #ccc; color: #ccc;
} }
.language-select {
margin: 8px;
font-weight: 200;
cursor: pointer;
pointer-events: auto;
}
.language-select:hover{
color: #ccc;
}
.icon.hidden { .icon.hidden {
display: none; display: none;
} }

78
frontend/web-editor/src/locales.js
View File

@@ -1,7 +1,7 @@
module.exports = { module.exports = {
en: { en: {
translation: { translation: {
'language-name': 'English', 'language-name': 'english',
toolbar: { toolbar: {
run: "Run all code (ctrl+shift+enter)", run: "Run all code (ctrl+shift+enter)",
upload: "upload to gallery", upload: "upload to gallery",
@@ -37,42 +37,42 @@ module.exports = {
} }
} }
}, },
es: { // es: {
translation: { // translation: {
'language-name': 'asfafd', // 'language-name': 'asfafd',
toolbar: { // toolbar: {
run: "Run all code (ctrl+shift+enter)", // run: "Run all code (ctrl+shift+enter)",
upload: "upload to gallery", // upload: "upload to gallery",
clear: "clear all", // clear: "clear all",
shuffle: "show random sketch", // shuffle: "show random sketch",
random: "make random change", // random: "make random change",
"show-info": "show info window", // "show-info": "show info window",
"hide-info": "hide info window" // "hide-info": "hide info window"
}, // },
info: { // info: {
title: 'sdadddsad', // title: 'sdadddsad',
subtitle: 'live coding networked visuals', // subtitle: 'live coding networked visuals',
description: 'Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.', // description: 'Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.',
'get-started-title': 'To get started:', // 'get-started-title': 'To get started:',
'get-started-list': [ // 'get-started-list': [
'Close this window', // 'Close this window',
'Change some numbers', // 'Change some numbers',
'Type Ctrl + Shift + Enter' // 'Type Ctrl + Shift + Enter'
], // ],
'description-detailed': 'Built using WebRTC (peer-to-peer web streaming) and WebGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions.', // 'description-detailed': 'Built using WebRTC (peer-to-peer web streaming) and WebGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions.',
'features': 'Features:', // 'features': 'Features:',
'features-list': [ // 'features-list': [
'Written in javascript and compatible with other javascript libraries', // 'Written in javascript and compatible with other javascript libraries',
'Available as a platform as well as a set of standalone modules', // 'Available as a platform as well as a set of standalone modules',
'Cross-platform and requires no installation (runs in the browser)', // 'Cross-platform and requires no installation (runs in the browser)',
'Also available as a package for live coding from within atom text editor', // 'Also available as a package for live coding from within atom text editor',
'Experimental and forever evolving !!' // 'Experimental and forever evolving !!'
], // ],
'author': 'Created by <a {{author}}>olivia.</a>', // 'author': 'Created by <a {{author}}>olivia.</a>',
'more-info': 'For more information and instructions, see: <a {{docs}}>the online documentation</a>, <a {{functions}}>a list of hydra functions</a>, <a {{repo}}>the source code on github</a>, <a {{gallery}}>a gallery of user-generated sketches</a>, <a {{pixeljam}}>PIXELJAM collaborative editor</a>, <a {{hydra-book}}>Hydra Book</a>, and more <a {{tutorials}}>tutorials and examples.</a>', // 'more-info': 'For more information and instructions, see: <a {{docs}}>the online documentation</a>, <a {{functions}}>a list of hydra functions</a>, <a {{repo}}>the source code on github</a>, <a {{gallery}}>a gallery of user-generated sketches</a>, <a {{pixeljam}}>PIXELJAM collaborative editor</a>, <a {{hydra-book}}>Hydra Book</a>, and more <a {{tutorials}}>tutorials and examples.</a>',
'more-info-forums': 'There is also an active <a {{discord}}>Discord server</a> and <a {{facebook}}>facebook group</a> for hydra users+contributors.', // 'more-info-forums': 'There is also an active <a {{discord}}>Discord server</a> and <a {{facebook}}>facebook group</a> for hydra users+contributors.',
'support': 'If you enjoy using Hydra, please consider <a {{open-collective}} >supporting continued development <3 </a>.' // 'support': 'If you enjoy using Hydra, please consider <a {{open-collective}} >supporting continued development <3 </a>.'
} // }
} // }
} // }
} }

9
frontend/web-editor/src/store.js
View File

@@ -24,6 +24,15 @@ module.exports = function store(state, emitter) {
selectedLanguage: i18next.language selectedLanguage: i18next.language
} }
emitter.on('set language', (lang) => {
console.log('setting language to', lang)
i18next.changeLanguage(lang, (err, t) => {
console.log(err, t)
selectedLanguage = lang
emitter.emit('render')
})
})
let sketches let sketches
emitter.on('DOMContentLoaded', function () { emitter.on('DOMContentLoaded', function () {

7
frontend/web-editor/src/views/info.js
View File

@@ -4,12 +4,15 @@ const toolbar = require('./toolbar.js')
const link = (url) => `href=${url} target=_blank` const link = (url) => `href=${url} target=_blank`
module.exports = function mainView(state, emit) { module.exports = function mainView(state, emit) {
const { t } = state.translation const { t, languages } = state.translation
const langArray = Object.entries(languages)
return html` return html`
<div id="info-container" class="${state.showInfo ? "" : "hidden"}"> <div id="info-container" class="${state.showInfo ? "" : "hidden"}">
<div id="modal"> <div id="modal">
<div id="modal-header" style="opacity:${state.showUI === true? 1: 0}"> <div id="modal-header" style="opacity:${state.showUI === true? 1: 0}">
<div><!--<i class="fas fa-bars icon"></i>--></div> ${state.showInfo && langArray.length > 1 ? html`<div style="display:flex">${langArray.map(([key, val]) => html`
<div class="language-select" onclick=${() => emit('set language', key)}>${val}</div>
`)}</div>` : html`<div></div>` }
${toolbar(state, emit)} ${toolbar(state, emit)}
</div> </div>
<div id="modal-body"> <div id="modal-body">