Clip.qml 35.1 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
 * Copyright (c) 2013-2016 Meltytech, LLC
 * Author: Dan Dennedy <dan@dennedy.org>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

19
import QtQuick 2.6
20
import QtQuick.Controls 2.2
21
import Kdenlive.Controls 1.0
22
23
import QtQml.Models 2.2
import QtQuick.Window 2.2
24
import 'Timeline.js' as Logic
25
import com.enums 1.0
26
27
28

Rectangle {
    id: clipRoot
29
    property real timeScale: 1.0
30
31
32
    property string clipName: ''
    property string clipResource: ''
    property string mltService: ''
33
    property string effectNames
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
34
    property int modelStart
35
    property real scrollX: 0
36
37
38
    property int inPoint: 0
    property int outPoint: 0
    property int clipDuration: 0
39
    property int maxDuration: 0
40
    property bool isAudio: false
41
    property int audioChannels
42
    property bool showKeyframes: false
43
    property bool isGrabbed: false
44
    property bool grouped: false
45
    property var markers
46
    property var keyframeModel
47
48
    property int clipStatus: 0
    property int itemType: 0
49
50
    property int fadeIn: 0
    property int fadeOut: 0
51
    property int binId: 0
52
    property int positionOffset: 0
53
    property var parentTrack
54
55
    property int trackIndex //Index in track repeater
    property int clipId     //Id of the clip in the model
56
57
58
    property int trackId: -1 // Id of the parent track in the model
    property int fakeTid: -1
    property int fakePosition: 0
59
    property int originalTrackId: -1
60
    property int originalX: x
61
62
    property int originalDuration: clipDuration
    property int lastValidDuration: clipDuration
63
    property int draggedX: x
64
    property bool selected: false
65
    property bool isLocked: parentTrack && parentTrack.isLocked == true
66
    property bool hasAudio
67
68
    property bool canBeAudio
    property bool canBeVideo
69
    property string hash: 'ccc' //TODO
70
    property double speed: 1.0
71
    property color borderColor: 'black'
72
    property bool forceReloadThumb
73
    property bool isComposition: false
74
    property var groupTrimData
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
75
    width : clipDuration * timeScale;
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
76
    opacity: dragProxyArea.drag.active && dragProxy.draggedItem == clipId ? 0.8 : 1.0
77

78
79
    signal trimmingIn(var clip, real newDuration, var mouse, bool shiftTrim)
    signal trimmedIn(var clip, bool shiftTrim)
80
    signal initGroupTrim(var clip)
81
82
    signal trimmingOut(var clip, real newDuration, var mouse, bool shiftTrim)
    signal trimmedOut(var clip, bool shiftTrim)
83

84
85
86
87
88
89
90
    onIsGrabbedChanged: {
        if (clipRoot.isGrabbed) {
            clipRoot.forceActiveFocus();
            mouseArea.focus = true
        }
    }

91
92
    function clearAndMove(offset) {
        controller.requestClearSelection()
93
94
        controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true)
        controller.requestAddToSelection(clipRoot.clipId)
95
96
    }

97
    onInPointChanged: {
98
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
99
            thumbsLoader.item.reload()
100
        }
101
102
    }

103
    onClipResourceChanged: {
104
        if (itemType == ProducerType.Color) {
105
            color: Qt.darker(getColor(), 1.5)
106
107
        }
    }
108
    ToolTip {
109
        visible: mouseArea.containsMouse && !dragProxyArea.pressed
110
111
112
113
114
115
116
117
118
        font.pixelSize: root.baseUnit
        delay: 1000
        timeout: 5000
        background: Rectangle {
            color: activePalette.alternateBase
            border.color: activePalette.light
        }
        contentItem: Label {
            color: activePalette.text
119
            text: clipRoot.clipName + ' (' + timeline.timecode(clipRoot.inPoint) + '-' + timeline.timecode(clipRoot.outPoint) + ')'
120
121
122
        }
    }

123
124
    onKeyframeModelChanged: {
        console.log('keyframe model changed............')
125
126
127
        if (effectRow.keyframecanvas) {
            effectRow.keyframecanvas.requestPaint()
        }
128
129
    }

Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
130
131
    onClipDurationChanged: {
        width = clipDuration * timeScale;
132
    }
133

134
135
136
    onModelStartChanged: {
        x = modelStart * timeScale;
    }
137
138
139
140
141
    onFakePositionChanged: {
        x = fakePosition * timeScale;
    }
    onFakeTidChanged: {
        if (clipRoot.fakeTid > -1 && parentTrack) {
142
143
144
145
146
147
148
            if (clipRoot.parent != dragContainer) {
                var pos = clipRoot.mapToGlobal(clipRoot.x, clipRoot.y);
                clipRoot.parent = dragContainer
                pos = clipRoot.mapFromGlobal(pos.x, pos.y)
                clipRoot.x = pos.x
                clipRoot.y = pos.y
            }
149
150
            clipRoot.y = Logic.getTrackById(clipRoot.fakeTid).y
        }
151
152
    }

153
    onForceReloadThumbChanged: {
154
        // TODO: find a way to force reload of clip thumbs
155
156
157
        if (thumbsLoader.item) {
            thumbsLoader.item.reload()
        }
158
159
    }

160
    onTimeScaleChanged: {
161
        x = modelStart * timeScale;
162
        width = clipDuration * timeScale;
163
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
164
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
165
            thumbsLoader.item.reload();
166
        }
167
168
169
    }
    onScrollXChanged: {
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
170
171
    }

Vincent Pinon's avatar
Vincent Pinon committed
172
    border.color: selected ? root.selectionColor : grouped ? root.groupColor : borderColor
173
    border.width: isGrabbed ? 8 : 1.5
174

175
176
177
178
179
    function updateDrag() {
        var itemPos = mapToItem(tracksContainerArea, 0, 0, clipRoot.width, clipRoot.height)
        initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
    }

180
    function getColor() {
181
182
183
        if (clipStatus == ClipState.Disabled) {
            return 'grey'
        }
184
        if (itemType == ProducerType.Color) {
185
186
187
            var color = clipResource.substring(clipResource.length - 9)
            if (color[0] == '#') {
                return color
188
            }
189
            return '#' + color.substring(color.length - 8, color.length - 2)
190
        }
191
        return isAudio? root.audioColor : root.videoColor
192
193
    }

194
/*    function reparent(track) {
195
        console.log('TrackId: ',trackId)
196
197
        parent = track
        height = track.height
198
        parentTrack = track
199
        trackId = parentTrack.trackId
200
        console.log('Reparenting clip to Track: ', trackId)
201
        //generateWaveform()
202
    }
203
*/
204
205
    property bool variableThumbs: (isAudio || itemType == ProducerType.Color || mltService === '')
    property bool isImage: itemType == ProducerType.Image
206
207
208
    property string baseThumbPath: variableThumbs ? '' : 'image://thumbnail/' + binId + '/' + (isImage ? '#0' : '#')
    property string inThumbPath: (variableThumbs || isImage ) ? baseThumbPath : baseThumbPath + Math.floor(inPoint * speed)
    property string outThumbPath: (variableThumbs || isImage ) ? baseThumbPath : baseThumbPath + Math.floor(outPoint * speed)
209

210
    DropArea { //Drop area for clips
211
212
213
        anchors.fill: clipRoot
        keys: 'kdenlive/effect'
        property string dropData
214
        property string dropSource
215
        property int dropRow: -1
216
217
        onEntered: {
            dropData = drag.getDataAsString('kdenlive/effect')
218
            dropSource = drag.getDataAsString('kdenlive/effectsource')
219
220
221
        }
        onDropped: {
            console.log("Add effect: ", dropData)
222
            if (dropSource == '') {
223
224
225
                // drop from effects list
                controller.addClipEffect(clipRoot.clipId, dropData);
            } else {
226
                controller.copyClipEffect(clipRoot.clipId, dropSource);
227
            }
228
            dropSource = ''
229
            dropRow = -1
230
            drag.acceptProposedAction
231
232
        }
    }
233
234
    MouseArea {
        id: mouseArea
235
        enabled: root.activeTool === 0
236
        anchors.fill: clipRoot
237
        acceptedButtons: Qt.RightButton
238
        hoverEnabled: root.activeTool === 0
239
        cursorShape: dragProxyArea.drag.active ? Qt.ClosedHandCursor : Qt.OpenHandCursor
240
241
        onPressed: {
            root.stopScrolling = true
242
            if (mouse.button == Qt.RightButton) {
243
                if (timeline.selection.indexOf(clipRoot.clipId) == -1) {
244
                    controller.requestAddToSelection(clipRoot.clipId, true)
245
246
247
                }
                clipMenu.clipId = clipRoot.clipId
                clipMenu.clipStatus = clipRoot.clipStatus
248
                clipMenu.clipFrame = Math.round(mouse.x / timeline.scaleFactor)
249
250
251
252
253
                clipMenu.grouped = clipRoot.grouped
                clipMenu.trackId = clipRoot.trackId
                clipMenu.canBeAudio = clipRoot.canBeAudio
                clipMenu.canBeVideo = clipRoot.canBeVideo
                clipMenu.popup()
254
            }
255
        }
256
        Keys.onShortcutOverride: event.accepted = clipRoot.isGrabbed && (event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Up || event.key === Qt.Key_Down)
257
258
259
260
261
262
        Keys.onLeftPressed: {
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - 1, true, true, true);
        }
        Keys.onRightPressed: {
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart + 1, true, true, true);
        }
263
264
265
266
267
268
        Keys.onUpPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getNextTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
        Keys.onDownPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getPreviousTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
269
        onPositionChanged: {
270
271
            var mapped = parentTrack.mapFromItem(clipRoot, mouse.x, mouse.y).x
            root.mousePosChanged(Math.round(mapped / timeline.scaleFactor))
272
        }
273
274
275
276
        onEntered: {
            var itemPos = mapToItem(tracksContainerArea, 0, 0, width, height)
            initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
        }
277

278
279
        onExited: {
            endDrag()
280
        }
281
        onWheel: zoomByWheel(wheel)
282

283
284
        Item {
            // Thumbs container
285
            anchors.fill: parent
286
287
288
289
290
291
292
293
294
295
296
297
298
299
            anchors.leftMargin: 0
            anchors.rightMargin: 0
            anchors.topMargin: clipRoot.border.width
            anchors.bottomMargin: clipRoot.border.width
            clip: true
            Loader {
                id: thumbsLoader
                asynchronous: true
                visible: status == Loader.Ready
                anchors.fill: parent
                source: parentTrack.isAudio ? (timeline.showAudioThumbnails ? "ClipAudioThumbs.qml" : "") : itemType == ProducerType.Color ? "" : timeline.showThumbnails ? "ClipThumbs.qml" : ""
                onLoaded: {
                    item.reload()
                }
300
            }
301
        }
302

303
304
305
306
307
308
        Item {
            // Clipping container
            id: container
            anchors.fill: parent
            anchors.margins: 1.5
            clip: true
309

310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
            Rectangle {
                // text background
                id: labelRect
                color: clipRoot.selected ? 'darkred' : '#66000000'
                width: label.width + 2
                height: label.height
                visible: clipRoot.width > width / 2
                Text {
                    id: label
                    text: clipName + (clipRoot.speed != 1.0 ? ' [' + Math.round(clipRoot.speed*100) + '%]': '')
                    font.pixelSize: root.baseUnit * 1.2
                    anchors {
                        top: labelRect.top
                        left: labelRect.left
                        topMargin: 1
                        leftMargin: 1
                    }
                    color: 'white'
                    style: Text.Outline
                    styleColor: 'black'
                }
            }
            Rectangle {
                // Offset info
                id: offsetRect
                color: 'darkgreen'
                width: offsetLabel.width + radius
                height: offsetLabel.height
                radius: height/3
                x: labelRect.width + 4
                visible: labelRect.visible && positionOffset != 0
                MouseArea {
                    id: offsetArea
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    anchors.fill: parent
                    onClicked: {
                        clearAndMove(positionOffset)
                    }
                    ToolTip {
                        visible: offsetArea.containsMouse
                        font.pixelSize: root.baseUnit
                        delay: 1000
                        timeout: 5000
                        background: Rectangle {
                            color: activePalette.alternateBase
                            border.color: activePalette.light
                        }
                        contentItem: Label {
                            color: activePalette.text
                            text: i18n('Offset') + (positionOffset < 0 ? ( ': -' + timeline.timecode(-positionOffset)) : ': ' + timeline.timecode(positionOffset))
                        }
                    }
                    Text {
                        id: offsetLabel
                        text: positionOffset
                        font.pixelSize: root.baseUnit * 1.2
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            topMargin: 1
                            leftMargin: 1
                        }
                        color: 'white'
                        style: Text.Outline
                        styleColor: 'black'
                    }
                }
            }
            Rectangle {
                // effects
                id: effectsRect
                color: '#555555'
                width: effectLabel.width + 2
                height: effectLabel.height
                x: labelRect.x
                anchors.top: labelRect.bottom
                visible: labelRect.visible && clipRoot.effectNames != ''
                Text {
                    id: effectLabel
                    text: clipRoot.effectNames
                    font.pixelSize: root.baseUnit * 1.2
                    anchors {
                        top: effectsRect.top
                        left: effectsRect.left
                        topMargin: 1
                        leftMargin: 1
                        // + ((isAudio || !settings.timelineShowThumbnails) ? 0 : inThumbnail.width) + 1
                    }
                    color: 'white'
                    //style: Text.Outline
                    styleColor: 'black'
                }
            }

            Repeater {
                model: markers
                delegate:
                Item {
                    anchors.fill: parent
                    Rectangle {
                        id: markerBase
                        width: 1
                        height: parent.height
413
                        x: clipRoot.speed < 0 ? clipRoot.clipDuration * timeScale + (Math.round(model.frame / clipRoot.speed) - (clipRoot.maxDuration - clipRoot.outPoint)) * timeScale : (Math.round(model.frame / clipRoot.speed) - clipRoot.inPoint) * timeScale;
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
                        color: model.color
                    }
                    Rectangle {
                        visible: mlabel.visible
                        opacity: 0.7
                        x: markerBase.x
                        radius: 2
                        width: mlabel.width + 4
                        height: mlabel.height
                        anchors {
                            bottom: parent.verticalCenter
                        }
                        color: model.color
                        MouseArea {
                            z: 10
                            anchors.fill: parent
                            acceptedButtons: Qt.LeftButton
                            cursorShape: Qt.PointingHandCursor
                            hoverEnabled: true
433
                            onDoubleClicked: timeline.editMarker(clipRoot.clipId, model.frame)
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
                            onClicked: timeline.position = (clipRoot.x + markerBase.x) / timeline.scaleFactor
                        }
                    }
                    Text {
                        id: mlabel
                        visible: timeline.showMarkers && parent.width > width * 1.5
                        text: model.comment
                        font.pixelSize: root.baseUnit
                        x: markerBase.x
                        anchors {
                            bottom: parent.verticalCenter
                            topMargin: 2
                            leftMargin: 2
                        }
                        color: 'white'
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
450
                }
451
452
453
454
455
456
457
458
459
460
            }

            KeyframeView {
                id: effectRow
                visible: clipRoot.showKeyframes && clipRoot.keyframeModel
                selected: clipRoot.selected
                inPoint: clipRoot.inPoint
                outPoint: clipRoot.outPoint
                masterObject: clipRoot
                kfrModel: clipRoot.keyframeModel
461
462
            }
        }
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494

        states: [
            State {
                name: 'locked'
                when: isLocked
                PropertyChanges {
                    target: clipRoot
                    color: root.lockedColor
                    opacity: 0.8
                    z: 0
                }
            },
            State {
                name: 'normal'
                when: clipRoot.selected === false
                PropertyChanges {
                    target: clipRoot
                    color: Qt.darker(getColor(), 1.5)
                    z: 0
                }
            },
            State {
                name: 'selected'
                when: clipRoot.selected === true
                PropertyChanges {
                    target: clipRoot
                    color: getColor()
                    z: 3
                }
            }
        ]

495
        Rectangle {
496
497
498
499
500
501
502
503
504
505
506
507
508
509
            id: compositionIn
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.leftMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
            enabled: !clipRoot.isAudio && dragProxy.draggedItem == clipRoot.clipId
            visible: clipRoot.width > 4 * width
510
            MouseArea {
511
512
                id: compInArea
                anchors.fill: parent
513
514
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
515
516
517
518
519
520
521
522
523
524
525
526
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
                }
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, 0)
                    endDrag()
                }
                onReleased: {
                    parent.opacity = 0
527
528
                }
                ToolTip {
529
                    visible: compInArea.containsMouse && !dragProxyArea.pressed
530
531
532
533
534
535
536
537
538
                    font.pixelSize: root.baseUnit
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
539
                        text: i18n('Click to add composition')
540
541
542
543
                    }
                }
            }
        }
544
        Rectangle {
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
            id: compositionOut
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.rightMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
            enabled: !clipRoot.isAudio  && dragProxy.draggedItem == clipRoot.clipId
            visible: clipRoot.width > 4 * width
            MouseArea {
                id: compOutArea
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
561
                anchors.fill: parent
562
563
564
565
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.opacity = 0.7
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
566
                }
567
568
569
                onExited: {
                    if (!pressed) {
                        parent.opacity = 0
570
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
571
                }
572
573
574
575
576
577
578
579
580
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, clipRoot.clipDuration - 1)
                    endDrag()
                }
                onReleased: {
                    parent.opacity = 0
                }
                ToolTip {
                    visible: compOutArea.containsMouse && !dragProxyArea.pressed
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
581
                    font.pixelSize: root.baseUnit
582
583
584
585
586
587
588
589
590
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
                        text: i18n('Click to add composition')
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
591
592
                    }
                }
593
594
            }
        }
595

596

597
598
599
600
601
602
603
604
605
        TimelineTriangle {
            id: fadeInTriangle
            fillColor: 'green'
            width: Math.min(clipRoot.fadeIn * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
606
        }
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
        Rectangle {
            id: fadeInControl
            anchors.left: fadeInTriangle.width > radius? undefined : fadeInTriangle.left
            anchors.horizontalCenter: fadeInTriangle.width > radius? fadeInTriangle.right : undefined
            anchors.top: fadeInTriangle.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#FF66FFFF'
            border.width: 2
            border.color: 'green'
            enabled: !isLocked && !dragProxy.isComposition
            opacity: 0
            visible : clipRoot.width > 3 * width
            Drag.active: fadeInMouseArea.drag.active
            MouseArea {
                id: fadeInMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                drag.axis: Drag.XAxis
                drag.smoothed: false
                property int startX
                property int startFadeIn
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
640
                }
641
642
643
644
645
646
647
648
649
                onPressed: {
                    root.stopScrolling = true
                    startX = Math.round(parent.x / timeScale)
                    startFadeIn = clipRoot.fadeIn
                    parent.anchors.left = undefined
                    parent.anchors.horizontalCenter = undefined
                    parent.opacity = 1
                    fadeInTriangle.opacity = 0.5
                    // parentTrack.clipSelected(clipRoot, parentTrack) TODO
650
                }
651
652
653
                onReleased: {
                    root.stopScrolling = false
                    fadeInTriangle.opacity = 0.3
654
                    parent.opacity = 0
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
                    if (fadeInTriangle.width > parent.radius)
                        parent.anchors.horizontalCenter = fadeInTriangle.right
                    else
                        parent.anchors.left = fadeInTriangle.left
                    console.log('released fade: ', clipRoot.fadeIn)
                    timeline.adjustFade(clipRoot.clipId, 'fadein', clipRoot.fadeIn, startFadeIn)
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = Math.round(parent.x / timeScale) - startX
                        var duration = Math.max(0, startFadeIn + delta)
                        duration = Math.min(duration, clipRoot.clipDuration)
                        if (duration != clipRoot.fadeIn) {
                            timeline.adjustFade(clipRoot.clipId, 'fadein', duration, -1)
                            // Show fade duration as time in a "bubble" help.
                            var s = timeline.timecode(Math.max(duration, 0))
                            bubbleHelp.show(clipRoot.x, parentTrack.y + clipRoot.height, s)
                        }
                    }
675
                }
676
            }
677
678
679
680
681
682
683
684
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeInMouseArea.containsMouse && !fadeInMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
685
                }
686
687
688
689
690
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
691
692
693
694
                }
            }
        }

695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
        TimelineTriangle {
            id: fadeOutCanvas
            fillColor: 'red'
            width: Math.min(clipRoot.fadeOut * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
            transform: Scale { xScale: -1; origin.x: fadeOutCanvas.width / 2}
        }
        Rectangle {
            id: fadeOutControl
            anchors.right: fadeOutCanvas.width > radius? undefined : fadeOutCanvas.right
            anchors.horizontalCenter: fadeOutCanvas.width > radius? fadeOutCanvas.left : undefined
            anchors.top: fadeOutCanvas.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#66FFFFFF'
            border.width: 2
            border.color: 'red'
            opacity: 0
            enabled: !isLocked && !dragProxy.isComposition
            Drag.active: fadeOutMouseArea.drag.active
            visible : clipRoot.width > 3 * width
            MouseArea {
                id: fadeOutMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                property int startX
                property int startFadeOut
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
737
                    }
738
                }
739
740
741
742
743
744
745
746
747
                drag.smoothed: false
                onPressed: {
                    root.stopScrolling = true
                    startX = Math.round(parent.x / timeScale)
                    startFadeOut = clipRoot.fadeOut
                    parent.anchors.right = undefined
                    parent.anchors.horizontalCenter = undefined
                    parent.opacity = 1
                    fadeOutCanvas.opacity = 0.5
748
                }
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
                onReleased: {
                    fadeOutCanvas.opacity = 0.3
                    parent.opacity = 0
                    root.stopScrolling = false
                    if (fadeOutCanvas.width > parent.radius)
                        parent.anchors.horizontalCenter = fadeOutCanvas.left
                    else
                        parent.anchors.right = fadeOutCanvas.right
                    timeline.adjustFade(clipRoot.clipId, 'fadeout', clipRoot.fadeOut, startFadeOut)
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = startX - Math.round(parent.x / timeScale)
                        var duration = Math.max(0, startFadeOut + delta)
                        duration = Math.min(duration, clipRoot.clipDuration)
                        if (clipRoot.fadeOut != duration) {
                            timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, -1)
                            // Show fade duration as time in a "bubble" help.
                            var s = timeline.timecode(Math.max(duration, 0))
                            bubbleHelp.show(clipRoot.x + clipRoot.width, parentTrack.y + clipRoot.height, s)
                        }
771
                    }
772
773
                }
            }
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeOutMouseArea.containsMouse && !fadeOutMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
789
790
            }
        }
791
    }
792
793
794

    Rectangle {
        id: trimIn
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
795
        anchors.left: clipRoot.left
796
797
        anchors.leftMargin: 0
        height: parent.height
798
        enabled: !isLocked
799
800
801
802
803
        width: 5
        color: isAudio? 'green' : 'lawngreen'
        opacity: 0
        Drag.active: trimInMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
804
        visible: trimInMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
805
806
807
808
809
810
811

        MouseArea {
            id: trimInMouseArea
            anchors.fill: parent
            hoverEnabled: true
            drag.target: parent
            drag.axis: Drag.XAxis
812
            drag.smoothed: false
813
            property bool shiftTrim: false
814
            property bool sizeChanged: false
815
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
816
817
            onPressed: {
                root.stopScrolling = true
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
818
                clipRoot.originalX = clipRoot.x
819
                clipRoot.originalDuration = clipDuration
820
                parent.anchors.left = undefined
821
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
822
823
824
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
825
                parent.opacity = 0
826
827
828
829
            }
            onReleased: {
                root.stopScrolling = false
                parent.anchors.left = clipRoot.left
830
831
832
833
                if (sizeChanged) {
                    clipRoot.trimmedIn(clipRoot, shiftTrim)
                    sizeChanged = false
                }
834
835
836
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
837
                    var delta = Math.round((trimIn.x) / timeScale)
838
                    if (delta !== 0) {
839
840
841
                        if (delta < -modelStart) {
                            delta = -modelStart
                        }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
842
                        var newDuration =  clipDuration - delta
843
                        sizeChanged = true
844
                        clipRoot.trimmingIn(clipRoot, newDuration, mouse, shiftTrim)
845
                    }
846
847
                }
            }
848
            onEntered: {
849
850
851
                if (!pressed) {
                    parent.opacity = 0.5
                }
852
853
854
855
            }
            onExited: {
                parent.opacity = 0
            }
856
857
858
859
        }
    }
    Rectangle {
        id: trimOut
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
860
        anchors.right: clipRoot.right
861
862
863
864
865
        anchors.rightMargin: 0
        height: parent.height
        width: 5
        color: 'red'
        opacity: 0
866
        enabled: !isLocked
867
868
        Drag.active: trimOutMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
869
        visible: trimOutMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
870
871
872
873
874

        MouseArea {
            id: trimOutMouseArea
            anchors.fill: parent
            hoverEnabled: true
875
            property bool shiftTrim: false
876
            property bool sizeChanged: false
877
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
878
879
            drag.target: parent
            drag.axis: Drag.XAxis
880
            drag.smoothed: false
881
882
883

            onPressed: {
                root.stopScrolling = true
884
                clipRoot.originalDuration = clipDuration
885
                parent.anchors.right = undefined
886
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
887
888
889
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
890
                parent.opacity = 0
891
892
893
894
            }
            onReleased: {
                root.stopScrolling = false
                parent.anchors.right = clipRoot.right
895
896
897
898
                if (sizeChanged) {
                    clipRoot.trimmedOut(clipRoot, shiftTrim)
                    sizeChanged = false
                }
899
900
901
902
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
                    var newDuration = Math.round((parent.x + parent.width) / timeScale)
903
                    if (newDuration != clipDuration) {
904
                        sizeChanged = true
905
                        clipRoot.trimmingOut(clipRoot, newDuration, mouse, shiftTrim)
906
                    }
907
908
                }
            }
909
910
911
912
913
            onEntered: {
                if (!pressed) {
                    parent.opacity = 0.5
                }
            }
914
915
916
            onExited: parent.opacity = 0
        }
    }
917

918
        /*MenuItem {
919
            id: mergeItem
920
            text: i18n('Merge with next clip')
921
922
923
            onTriggered: timeline.mergeClipWithNext(trackIndex, index, false)
        }
        MenuItem {
924
            text: i18n('Rebuild Audio Waveform')
925
            onTriggered: timeline.remakeAudioLevels(trackIndex, index)
926
        }*/
927
        /*onPopupVisibleChanged: {
928
929
930
931
932
            if (visible && application.OS !== 'OS X' && __popupGeometry.height > 0) {
                // Try to fix menu running off screen. This only works intermittently.
                menu.__yOffset = Math.min(0, Screen.height - (__popupGeometry.y + __popupGeometry.height + 40))
                menu.__xOffset = Math.min(0, Screen.width - (__popupGeometry.x + __popupGeometry.width))
            }
933
        }*/
934
}