Surface promotion, remixing and attribution

PROMOTION.md

@@ -0,0 +1,3 @@
+## Avatar Promotion
+
+As part of saving your avatar, you can choose to allow Mozilla to promote your avatar. If you choose to allow Mozilla to promote your avatar, you grant to Mozilla a non-exclusive, worldwide, royalty-free, sublicensable license under all of your rights necessary to review your avatar, and publish, distribute, and promote it as part of Hubs or related Mozilla promotional efforts.

REMIXING.md

@@ -0,0 +1,7 @@
+## Remixing
+
+Allowing remixing means that others can download, edit, change, and re-publish your Hubs avatar as long as they give credit to the creators of the avatar. If you allow remixing, you agree to license your avatar under a [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode) license. We’ll provide you an opportunity to include the attribution information you want to include. This information will be associated with the avatar, but not stored with your account.
+
+You can change this setting at any time, by re-saving your avatar.
+
+If you don't allow remixing, your content will be published under the Hubs [Terms of Service](https://github.com/mozilla/hubs/blob/master/TERMS.md).

src/react-components/avatar-editor.js

@@ -42,6 +42,7 @@ export default class AvatarEditor extends Component {
   componentDidMount = async () => {
     if (this.props.avatarId) {
       const avatar = await this.fetchAvatar(this.props.avatarId);
+      avatar.creatorAttribution = (avatar.attributions && avatar.attributions.creator) || "";
       Object.assign(this.inputFiles, avatar.files);
       this.setState({ avatar, previewGltfUrl: avatar.base_gltf_url });
     } else {
@@ -115,6 +116,9 @@ export default class AvatarEditor extends Component {
     const fileUploads = await Promise.all(filesToUpload.map(f => this.inputFiles[f] && upload(this.inputFiles[f])));
     const avatar = {
       ...this.state.avatar,
+      attributions: {
+        creator: this.state.avatar.creatorAttribution
+      },
       files: fileUploads
         .map((resp, i) => [filesToUpload[i], resp && [resp.file_id, resp.meta.access_token, resp.meta.promotion_token]])
         .reduce((o, [k, v]) => ({ ...o, [k]: v }), {})
@@ -242,7 +246,7 @@ export default class AvatarEditor extends Component {
     </div>
   );
 
-  checkbox = (name, label, disabled) => (
+  checkbox = (name, children, disabled) => (
     <div className="checkbox-container">
       <input
         id={`avatar-${name}`}
@@ -252,7 +256,7 @@ export default class AvatarEditor extends Component {
         checked={!!this.state.avatar[name]}
         onChange={e => this.setState({ avatar: { ...this.state.avatar, [name]: e.target.checked } })}
       />
-      <label htmlFor={`#avatar-${name}`}>{label}</label>
+      <label htmlFor={`#avatar-${name}`}>{children}</label>
     </div>
   );
 
@@ -283,8 +287,41 @@ export default class AvatarEditor extends Component {
 
                 {this.mapField("orm_map", "ORM Map", "image/*", false, "Occlussion (r), Roughness (g), Metallic (b)")}
 
-                {debug && this.checkbox("allow_promotion", "Allow Promotion")}
-                {debug && this.checkbox("allow_remixing", "Allow Remixing")}
+                <hr />
+
+                {this.checkbox(
+                  "allow_promotion",
+                  <span>
+                    Allow{" "}
+                    <a
+                      href="https://github.com/mozilla/hubs/blob/master/PROMOTION.md"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Promotion
+                    </a>
+                  </span>
+                )}
+                {this.checkbox(
+                  "allow_remixing",
+                  <span>
+                    Allow{" "}
+                    <a
+                      href="https://github.com/mozilla/hubs/blob/master/REMIXING.md"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Remixing
+                    </a>{" "}
+                    <span>
+                      (under{" "}
+                      <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener noreferrer">
+                        CC-BY 3.0
+                      </a>)
+                    </span>
+                  </span>
+                )}
+                {this.textField("creatorAttribution", "Your Attribution (optional)", false, false)}
 
                 {/* {this.mapField("ao_map", "AO Map", "images/\*", true)} */}
                 {/* {this.mapField("metallic_map", "Metallic Map", "image/\*", true)} */}