spacedeck-open/views/partials/space-isolated.html
mntmn ebac854da8
Port Backend to SQLite/Sequelize (removes MongoDB), Support Electron (#14)
* The MongoDB/Mongoose data storage is removed in favor of Sequelize. This abstracts over SQLite or RDBMs like PostgreSQL and MSSQL. The default is SQLite, which significantly simplifies deployments in end-user environments.

* As Spacedeck now has no more mandatory server dependencies, we can wrap it in Electron and ship it as a desktop application.

* Removes docker-compose.yml

* First version of import UI
2018-04-12 16:40:58 +00:00

136 lines
6.8 KiB
HTML

<div id="space" class="section board active mouse-{{mouse_state}} tool-{{active_tool}}">
<div class="space-bounds" style="width:{{active_space.width*bounds_zoom}}px;height:{{active_space.height*bounds_zoom}}px;"></div>
<div class="wrapper"
style="transform:scale({{viewport_zoom}});transform-origin:0 0;width:{{active_space.width}}px;height:{{active_space.height}}px;background-image:url('{{active_space.background_uri}}');background-color:{{active_space.background_color}};margin-left:{{bounds_margin_horiz}}px;margin-top:{{bounds_margin_vert}}px" >
<div v-repeat="a : active_space_artifacts"
v-class="text-editing:(editing_artifact_id==a._id && (a.view.major_type=='text' || a.view.major_type=='shape'))"
style="{{a.view.style}}"
class="{{a.view.classes}}"
id="artifact-{{a._id}}">
<div v-if="a.view && a.view.major_type" style="height:100%; width:100%">
<!-- text -->
<div v-if="a.view.major_type == 'text'" class="text" style="{{a.view.inner_style}}">
<div class="text-table">
<div class="text-cell" style="{{a.view.text_cell_style}}">
<div class="text-column" class="text-editing" v-sd-richtext="obj:a" v-if="editing_artifact_id==a._id">{{{a.description}}}</div>
<div class="text-column" v-if="editing_artifact_id!=a._id">{{{a.description|urls_to_links}}}</div>
</div>
</div>
</div>
<!-- drawing (annotation) -->
<div v-if="a.view.major_type == 'vector'" class="clip" style="{{a.view.inner_style}}">
<div>{{{a.view.vector_svg}}}</div>
</div>
<!-- svg shape -->
<div v-if="a.view.major_type == 'shape'" class="clip" style="{{a.view.inner_style}}">
<div class="shape">{{{a.view.vector_svg}}}</div>
<div class="text-table">
<div class="text-cell" style="{{a.view.text_cell_style}}">
<div class="text-column" v-sd-richtext="obj:a" v-class="text-editing:editing_artifact_id==a._id">{{{a.description}}}</div>
</div>
</div>
</div>
<!-- svg image -->
<div v-if="a.view.major_type == 'svg'" class="svg" style="{{a.view.inner_style}}">
<img v-attr="src : a.view.payload_uri"></img>
</div>
<!-- image -->
<div v-if="a.view.major_type == 'image'" class="image" style="{{a.view.inner_style}};background-image: url('{{a.view.thumbnail_uri}}');">
<span class="title">{{a.title}}</span>
<div class="spinner"></div>
<div class="progress" style="width:{{a.view.progress}}%">{{a.description}}</div>
<video v-if="a.mime == 'image/gif' && a.payload_alternatives && a.payload_alternatives.length > 0" preload autoplay loop>
<source v-repeat="rep : a.payload_alternatives" v-attr="src : rep.payload_uri, type : rep.mime" />
</video>
<!--span v-if="a.meta" class="link-wrapper"><a class="link btn btn-round btn-primary btn-sm" v-if="a.meta.link_uri" v-attr="href:a.meta.link_uri">{{a.view.link_caption}}</a></span-->
</div>
<!-- video -->
<div v-if="a.view.major_type == 'video'" v-videoplayer="a" class="video" style="{{a.view.inner_style}};background-image: url('{{a.view.thumbnail_uri}}');">
<video controls preload="metadata" v-attr="poster: a.view.thumbnail_uri">
<source v-repeat="rep : a.payload_alternatives" v-attr="src : rep.payload_uri, type : rep.mime" />
<source v-if="a.payload_uri && a.mime" v-attr="src : a.payload_uri, type : a.mime" />
</video>
<div class="spinner"></div>
<div class="progress" style="width:{{a.view.progress}}%">{{a.description}}</div>
</div>
<!-- audio -->
<div v-if="a.view.major_type == 'audio'" v-audioplayer="a" class="audio" style="{{a.view.inner_style}};">
<audio>
<source v-repeat="alt: a.payload_alternatives | orderBy 'mime' -1" v-attr="src: alt.payload_uri, type: alt.mime"/>
<source v-attr="src: a.payload_uri, type:a.mime" v-if="a.payload_uri"/>
</audio>
<div class="timeline" style="background-image: url('{{a.payload_thumbnail_web_uri}}')">
<div class="tl-current-time" style="width: {{a.player_view.current_time_float*100}}%"></div>
<div class="tl-inpoint" style="left: {{a.player_view.inpoint_float*100}}%" v-if="a.player_view.inpoint_float>0.0"></div>
<div class="tl-outpoint" style="left: {{a.player_view.outpoint_float*100}}%"></div>
</div>
<div class="tl-controls">
<div class="btn btn-md btn-toggle btn-round" v-class="alt:a.player_view.state=='playing'" v-show="a.w>=200 || a.player_view.state!='playing'">
<span class="btn-option play">
<span class="icon icon-controls-play"></span>
</span>
<span class="btn-option pause">
<span class="icon icon-controls-pause"></span>
</span>
</div>
<span class="btn btn-md btn-round btn-icon stop" v-show="a.player_view.state=='playing' || a.player_view.state=='paused'">
<span class="icon icon-controls-stop"></span>
</span>
<span class="tl-title" v-show="a.w>=250 && a.h>=150">{{a.view.filename}}</span>
<span class="tl-times" class="btn-group" v-show="a.w>=400 && a.h>=150">
<span class="btn btn-md btn-transparent no-p set-inpoint">{{a.player_view.current_time_string}} /</span>
<span class="btn btn-md btn-transparent no-p set-outpoint">{{a.player_view.total_time_string}}</span>
</span>
</div>
<div class="spinner"></div>
<div class="progress" style="width:{{a.view.progress}}%">{{a.description}}</div>
</div>
<!-- zone -->
<div v-if="a.view.major_type == 'zone'" class="zone" style="{{a.view.inner_style}}">
<div class="text-cell">
<div class="text-column" v-sd-richtext="obj:a" v-class="text-editing:editing_artifact_id==a._id">{{{a.description}}}</div>
</div>
</div>
<!-- embed -->
<div v-if="a.view.major_type == 'oembed'" class="oembed" style="{{a.view.inner_style}};background-color: #3d9ee9;padding:10px;word-wrap: break-word; text-align: center; color:white">
<span class="icon icon-video-camera"></span>
<a href="{{a.meta.link_uri}}" style="color: white;">{{a.meta.link_uri}}</a></p><!--v-html-->
</div>
<!-- file -->
<div v-if="a.view.major_type == 'file'" class="text" style="{{a.view.inner_style}}">
<span class="icon icon-page-vertical-double"></span>
{{a.view.filename}}
<div class="spinner"></div>
</div>
</div>
</div>
<!-- board artifacts end -->
</div>
<!-- wrapper end -->
</div>