jquery removal, minified iris.js

src/css/style.css

@@ -1255,12 +1255,6 @@ hr {
   padding: 15px;
 }
 
-#my-identicon {
-  flex: none;
-  align-self: center;
-  margin-right: 15px;
-}
-
 .user-name {
   align-self: center;
   flex: 1;

src/index.html

@@ -47,7 +47,7 @@
   <script src="./js/lib/radisk.js"></script>
   <script src="./js/lib/store.js"></script>
   <script src="./js/lib/rindexed.js"></script>
-  <script src="./js/lib/iris.js"></script>
+  <script src="./js/lib/iris.min.js"></script>
   <script src="./js/lib/emoji-button.js"></script>
   <script src="./js/lib/Autolinker.min.js"></script>
   <script src="./js/lib/qrcode.min.js"></script>

src/js/Helpers.js

@@ -1957,14 +1957,6 @@ export default {
     });
   },
 
-  hideAndRemove(el) {
-    el.fadeTo(1000, 0.01, function() {
-      $(this).slideUp(150, function() {
-        $(this).remove();
-      });
-    });
-  },
-
   checkColorScheme() {
     // If `prefers-color-scheme` is not supported, fall back to light mode.
     if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
@@ -2007,20 +1999,6 @@ export default {
     return this.wtClient;
   },
 
-  getIdenticon(pub, width) {
-    var el = $('<div>').width(width).height(width).addClass('identicon');
-    var identicon = $(new iris.Attribute({type: 'keyID', value: pub}).identicon({width, showType: false}));
-    el.html(identicon);
-    State.public.user(pub).get('profile').get('photo').on(data => { // TODO: limit size
-      if (data) {
-        el.html(setImgSrc($('<img>'), data).attr('width', width).attr('height', width).addClass('identicon-image'));
-      } else {
-        el.html(identicon);
-      }
-    });
-    return el;
-  },
-
   getProfileLink(pub) {
     return 'https://iris.to/#/profile/' + encodeURIComponent(pub);
   },

src/js/components/ChatList.js

@@ -32,9 +32,6 @@ class ChatList extends Component {
       limitedUpdate();
     });
     State.local.get('scrollUp').on(() => Helpers.animateScrollTop('.chat-list'));
-    if (Session.getKey()) {
-      $("#my-identicon").append(Helpers.getIdenticon(Session.getKey().pub, 40));
-    }
 
     if (window.Notification && Notification.permission !== 'granted' && Notification.permission !== 'denied') {
       setTimeout(() => {

src/js/components/Identicon.js

@@ -1,15 +1,19 @@
-import { Component } from '../lib/preact.js';import { html } from '../Helpers.js';
-import Helpers from '../Helpers.js';
+import { Component, createRef } from '../lib/preact.js';
+import { html } from '../Helpers.js';
 import State from '../State.js';
+import SafeImg from './SafeImg.js';
 
 class Identicon extends Component {
+
   constructor() {
     super();
     this.eventListeners = {};
+    this.identiconRef = createRef();
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     if (nextProps.str !== this.props.str) return true;
+    if (nextState.photo !== this.state.photo) return true;
     if (nextState.name !== this.state.name) return true;
     if (nextState.activity !== this.state.activity) return true;
     return false;
@@ -23,15 +27,21 @@ class Identicon extends Component {
   }
 
   componentDidMount() {
+    const pub = this.props.str;
+    this.identicon = new iris.Attribute({type: 'keyID', value: pub}).identicon({width: this.props.width, showType: false});
+    this.identiconRef.current.appendChild(this.identicon);
+    State.public.user(pub).get('profile').get('photo').on(photo => { // TODO: limit size
+      this.identiconRef.current.children[0].style = (photo ? '' : 'display:none');
+      this.setState({photo});
+    });
+
     this.setState({activity: null});
-    const i = Helpers.getIdenticon(this.props.str, this.props.width)[0];
     if (this.props.showTooltip) {
       State.public.user(this.props.str).get('profile').get('name').on((name,a,b,e) => {
         this.eventListeners['name'] = e;
         this.setState({name})
       });
     }
-    this.base.appendChild(i);
     if (this.props.activity) {
       State.public.user(this.props.str).get('activity').on((activity, a, b, e) => {
         this.eventListeners['activity'] = e;
@@ -54,12 +64,16 @@ class Identicon extends Component {
   }
 
   render() {
+    const width = this.props.width;
     const activity = ['online', 'active'].indexOf(this.state.activity) > -1 ? this.state.activity : '';
     return html`
-    <div onClick=${this.props.onClick} style="${this.props.onClick ? 'cursor: pointer;' : ''} position: relative;" class="identicon-container ${this.props.showTooltip ? 'tooltip' : ''} ${activity}">
-      ${this.props.showTooltip && this.state.name ? html`<span class="tooltiptext">${this.state.name}</span>` : ''}
-      ${this.props.activity ? html`<div class="online-indicator"/>` : ''}
-    </div>
+      <div onClick=${this.props.onClick} style="${this.props.onClick ? 'cursor: pointer;' : ''} position: relative;" class="identicon-container ${this.props.showTooltip ? 'tooltip' : ''} ${activity}">
+        <div style="width: ${width}; height: ${width}" class="identicon" ref=${this.identiconRef}>
+          ${this.state.photo ? html`<${SafeImg} src=${this.state.photo} class="identicon-image" width=${width}/>` : ''}
+        </div>
+        ${this.props.showTooltip && this.state.name ? html`<span class="tooltiptext">${this.state.name}</span>` : ''}
+        ${this.props.activity ? html`<div class="online-indicator"/>` : ''}
+      </div>
     `;
   }
 }

src/js/components/Torrent.js

@@ -1,5 +1,5 @@
 import { Component } from '../lib/preact.js';
-import Helpers, {html} from '../Helpers.js';
+import Helpers, {html, el} from '../Helpers.js';
 import Session from "../Session.js";
 import { translate as tr } from '../Translation.js';
 
@@ -16,7 +16,9 @@ class Torrent extends Component {
   }
 
   onPlay(e) {
-    !e.target.muted && $('#media-player').empty() && $('#media-player-container').hide();
+    const mp = document.getElementById('#media-player');
+    const mpc = document.getElementById()
+    !e.target.muted && mp.innerHTML = '' && $('#media-player-container').hide();
   }
 
   componentWillUnmount() {

src/js/views/Group.js

@@ -56,38 +56,6 @@ class Group extends View {
     }
   }
 
-  onSelectCandidate(pub) {
-    console.log('onSelectCandidate', pub);
-    $('#profile-add-participant-input').hide();
-    if (pub) {
-      $('#profile-add-participant-candidate').remove();
-      var identicon = Helpers.getIdenticon(pub, 40).css({'margin-right':15});
-      var nameEl = $('<span>');
-      State.public.user(pub).get('profile').get('name').on(name => nameEl.text(name));
-      var el = $('<p>').css({display:'flex', 'align-items': 'center'}).attr('id', 'profile-add-participant-candidate');
-      var addBtn = $('<button>').css({'margin-left': 15}).text(t('add')).click(() => {
-        if (newGroupParticipant) {
-          Session.channels[this.props.id].addParticipant(newGroupParticipant);
-          newGroupParticipant = null;
-          $('#profile-add-participant-input').val('').show();
-          $('#profile-add-participant-candidate').remove();
-        }
-      });
-      var removeBtn = $('<button>').css({'margin-left': 15}).text(t('cancel')).click(() => {
-        el.remove();
-        $('#profile-add-participant-input').val('').show();
-        newGroupParticipant = null;
-      });
-      el.append(identicon);
-      el.append(nameEl);
-      el.append(addBtn);
-      el.append(removeBtn);
-      newGroupParticipant = pub;
-      $('#profile-add-participant-input').after(el);
-    }
-    $(event.target).val('');
-  }
-
   onAddParticipant(add = true) {
     add && Session.channels[this.props.id].addParticipant(this.state.memberCandidate);
     this.setState({memberCandidate:null});